├── .gitignore ├── .storybook ├── addons.js └── config.js ├── CODE_OF_CONDUCT.md ├── LICENSE ├── README.md ├── docs └── screencast1.gif ├── package.json ├── public ├── favicon.ico ├── index.html └── manifest.json ├── src ├── App.css ├── App.js ├── App.test.js ├── api.js ├── index.css ├── index.js ├── libs │ └── ntc.js ├── logo.svg ├── registerServiceWorker.js ├── stories │ └── index.js ├── theme-api.js └── ui │ ├── DropDialog.js │ ├── Editor │ ├── Editor.js │ ├── Layout.js │ └── index.js │ ├── HelpDialog.js │ ├── Inspector │ ├── Inspector.js │ ├── PaletteTable.js │ └── index.js │ ├── ThemeAva.js │ ├── ThemesList │ ├── List.js │ ├── ThemesList.js │ └── index.js │ ├── Title.js │ ├── logoImage.js │ └── theme │ └── index.js └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | -------------------------------------------------------------------------------- /.storybook/addons.js: -------------------------------------------------------------------------------- 1 | import 'storybook-addon-material-ui/register'; 2 | // import '@storybook/addon-actions/register'; 3 | // import '@storybook/addon-links/register'; 4 | -------------------------------------------------------------------------------- /.storybook/config.js: -------------------------------------------------------------------------------- 1 | import { configure } from '@storybook/react'; 2 | 3 | function loadStories() { 4 | require('../src/stories'); 5 | } 6 | 7 | configure(loadStories, module); 8 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation. 6 | 7 | ## Our Standards 8 | 9 | Examples of behavior that contributes to creating a positive environment include: 10 | 11 | * Using welcoming and inclusive language 12 | * Being respectful of differing viewpoints and experiences 13 | * Gracefully accepting constructive criticism 14 | * Focusing on what is best for the community 15 | * Showing empathy towards other community members 16 | 17 | Examples of unacceptable behavior by participants include: 18 | 19 | * The use of sexualized language or imagery and unwelcome sexual attention or advances 20 | * Trolling, insulting/derogatory comments, and personal or political attacks 21 | * Public or private harassment 22 | * Publishing others' private information, such as a physical or electronic address, without explicit permission 23 | * Other conduct which could reasonably be considered inappropriate in a professional setting 24 | 25 | ## Our Responsibilities 26 | 27 | Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior. 28 | 29 | Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful. 30 | 31 | ## Scope 32 | 33 | This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers. 34 | 35 | ## Enforcement 36 | 37 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at oss@usul.su. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately. 38 | 39 | Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership. 40 | 41 | ## Attribution 42 | 43 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version] 44 | 45 | [homepage]: http://contributor-covenant.org 46 | [version]: http://contributor-covenant.org/version/1/4/ 47 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 react-theming 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | [![Live demo](https://img.shields.io/badge/Live%20Demo-gh--pages-brightgreen.svg)](https://react-theming.github.io/create-mui-theme/) 3 | 4 | # Create Material-UI Theme: + 5 | 6 | 7 | 8 | Online tool for creating Material-UI themes via Material Design Color Tool (https://material.io/tools/color) 9 | 10 | 1. Open `Color Tool` https://material.io/tools/color and `Create MUI Theme` https://react-theming.github.io/create-mui-theme/ 11 | 2. Select colors of your choice in `Color Tool` 12 | 3. Copy-paste URL from `Color Tool` browser tab to the input field in `Create MUI Theme` and click ADD (or simply drag & drop by mouse) 13 | 4. Take auto-generated code below and use it in your project 14 | 15 | [![Demo1](/docs/screencast1.gif)](https://raw.githubusercontent.com/react-theming/create-mui-theme/master/docs/screencast1.gif) 16 | 17 | ## Example 18 | 19 | Drag & Drop this URL onto page 20 | >https://material.io/tools/color/#!/?view.left=0&view.right=0&primary.color=AD1457&secondary.color=03A9F4&secondary.text.color=FAFAFA 21 | 22 | ## Usage 23 | 24 | You can use this auto-generated code with any your project which uses Material-UI of version 1.0.0 and above. For example you can start with [Create Material-UI App](https://github.com/react-theming/create-material-ui-app). Generated themes are compatible with with [Storybook Addon Material-UI](https://github.com/react-theming/storybook-addon-material-ui) 25 | 26 | ## Related links 27 | 28 | - https://material.io/tools/color 29 | - https://material-ui.com/style/color/#material-color-tool 30 | - https://material-ui.com/customization/themes/ 31 | - https://react-theming.github.io/create-mui-theme/ 32 | 33 | ## Support 34 | 35 | You can support this project with your stars and RT 36 | 37 | https://twitter.com/UsulPro/status/1022781130246905856 38 | 39 | ## CONTRIBUTING 40 | 41 | Any contributions are very welcome! 42 | 43 | #### Credits 44 | 45 | [telegram:@usulpro](https://t.me/usulpro) (The quickest way to contact me :zap:) 46 | 47 | [![@UsulPro](https://img.shields.io/badge/github-UsulPro-blue.svg)](https://github.com/UsulPro) 48 | 49 | [![@react-theming](https://img.shields.io/badge/github-React%20Theming-red.svg)](https://github.com/react-theming) 50 | 51 | [![GitHub release](https://img.shields.io/github/release/react-theming/create-mui-theme.svg)](https://github.com/react-theming/create-mui-theme) 52 | -------------------------------------------------------------------------------- /docs/screencast1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react-theming/create-mui-theme/074962aaaede02745764f5d6def6d42ea4215156/docs/screencast1.gif -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "create-material-ui-app", 3 | "version": "1.0.7", 4 | "private": true, 5 | "dependencies": { 6 | "@material-ui/core": "^1.3.0", 7 | "@material-ui/icons": "^1.1.0", 8 | "chance": "^1.0.16", 9 | "global": "^4.3.2", 10 | "graphql-request": "^1.6.0", 11 | "prettier": "^1.13.7", 12 | "prismjs": "^1.15.0", 13 | "react": "^16.4.1", 14 | "react-dom": "^16.4.1", 15 | "react-dropzone": "^4.2.13", 16 | "react-inspector": "^2.3.0", 17 | "react-scripts": "1.1.4", 18 | "react-simple-code-editor": "^0.4.2", 19 | "react-split-pane": "^0.1.82" 20 | }, 21 | "scripts": { 22 | "start": "cross-env BROWSER=none react-scripts start", 23 | "build": "react-scripts build", 24 | "test": "react-scripts test --env=jsdom", 25 | "eject": "react-scripts eject", 26 | "dev": "start-storybook -p 9009 -s public", 27 | "build-storybook": "build-storybook -s public", 28 | "predeploy": "npm version patch -m \"Deploy %s to gh-pages\" && npm run build", 29 | "deploy": "gh-pages -d build" 30 | }, 31 | "devDependencies": { 32 | "@storybook/addons": "@alpha", 33 | "@storybook/react": "@alpha", 34 | "babel-core": "^6.26.3", 35 | "cross-env": "^5.2.0", 36 | "gh-pages": "^1.2.0", 37 | "storybook-addon-material-ui": "@next" 38 | }, 39 | "homepage": "https://react-theming.github.io/create-mui-theme/" 40 | } 41 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react-theming/create-mui-theme/074962aaaede02745764f5d6def6d42ea4215156/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 14 | 23 | React App 24 | 25 | 26 | 29 |
30 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | 6 | .App-header { 7 | background-color: rgb(73, 73, 73); 8 | padding: 16px; 9 | color: white; 10 | text-align: left; 11 | } 12 | 13 | .App-title { 14 | font-size: 1.5em; 15 | } 16 | 17 | .App-intro { 18 | font-size: large; 19 | } 20 | 21 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { withStyles } from '@material-ui/core/styles'; 3 | import SplitPane from 'react-split-pane'; 4 | 5 | import { requestTheme, fetchThemes, STATUS } from './api'; 6 | import { themeName, themeCode, themeJson } from './theme-api'; 7 | import Title from './ui/Title'; 8 | import DropDialog from './ui/DropDialog'; 9 | import HelpDialog from './ui/HelpDialog'; 10 | import ThemesList from './ui/ThemesList'; 11 | import Editor from './ui/Editor'; 12 | import Inspector from './ui/Inspector'; 13 | 14 | const genID = () => `id_${Math.round(Math.random() * 10000000)}`; 15 | 16 | class App extends React.PureComponent { 17 | state = { 18 | dragover: false, 19 | themesList: [ 20 | // { 21 | // id: genID(), 22 | // ind: 0, 23 | // name: 'Theme 1', 24 | // query: 25 | // 'primary.color=000000&secondary.color=FFFFFF', 26 | // status: STATUS.NEW, 27 | // }, 28 | ], 29 | selectedTheme: null, 30 | showHelp: false, 31 | }; 32 | 33 | componentDidMount() { 34 | this.onAddQuery('primary.color=3f51b5&secondary.color=f50057'); 35 | window.addEventListener( 36 | 'dragover', 37 | e => { 38 | this.setState({ dragover: true }); 39 | e.preventDefault(); 40 | }, 41 | false 42 | ); 43 | window.addEventListener( 44 | 'dragleave', 45 | e => { 46 | this.setState({ dragover: false }); 47 | e.preventDefault(); 48 | }, 49 | false 50 | ); 51 | window.addEventListener( 52 | 'drop', 53 | e => { 54 | this.setState({ dragover: false }, () => 55 | e.dataTransfer.items[0].getAsString(this.onAddQuery) 56 | ); 57 | 58 | e.preventDefault(); 59 | }, 60 | false 61 | ); 62 | } 63 | 64 | handleNewQuery = ev => { 65 | const { value } = ev.target; 66 | requestTheme(value); 67 | }; 68 | 69 | updateThemesList = theme => { 70 | const newThemeList = this.state.themesList.filter( 71 | thm => thm.id !== theme.id 72 | ); 73 | if (theme.theme) { 74 | theme.name = themeName(theme.theme.palette) || theme.name; 75 | theme.theme.themeName = theme.name; 76 | theme.overrides.themeName = theme.name; 77 | } 78 | newThemeList.push(theme); 79 | this.setState( 80 | { 81 | themesList: newThemeList.sort((t1, t2) => t2.ind - t1.ind), 82 | }, 83 | () => 84 | this.state.selectedTheme && 85 | this.onSelectTheme(this.state.selectedTheme.id) 86 | ); 87 | }; 88 | 89 | onAddQuery = query => { 90 | const { themesList } = this.state; 91 | const id = genID(); 92 | const newThemeList = [ 93 | ...themesList, 94 | { 95 | id, 96 | ind: themesList.length, 97 | name: `Theme ${themesList.length + 1}`, 98 | query, 99 | status: STATUS.NEW, 100 | }, 101 | ]; 102 | this.setState({ themesList: newThemeList, selectedTheme: { id } }, () => 103 | fetchThemes(this.state.themesList, this.updateThemesList) 104 | ); 105 | }; 106 | 107 | onSelectTheme = id => { 108 | const theme = this.state.themesList.find(thm => thm.id === id); 109 | this.setState({ selectedTheme: theme }); 110 | }; 111 | 112 | layout = ({ themesListRender, themesPropsRender, themesCodeRender }) => ( 113 |
114 | 122 | 129 | {themesListRender()} 130 | 131 | 132 | {themesCodeRender()} 133 | 134 |
135 | ); 136 | 137 | onHelp = () => this.setState({ showHelp: !this.state.showHelp }); 138 | 139 | render() { 140 | const { themesList } = this.state; 141 | const themesListRender = () => ( 142 | 148 | ); 149 | const themesCodeRender = () => ( 150 | 158 | ); 159 | const themesPropsRender = () => {}; 160 | return ( 161 |
162 | 163 | <HelpDialog 164 | open={this.state.showHelp} 165 | onClose={() => this.setState({ showHelp: false })} 166 | /> 167 | <DropDialog 168 | open={this.state.dragover} 169 | onClose={() => this.setState({ dragover: false })} 170 | /> 171 | {this.layout({ themesListRender, themesPropsRender, themesCodeRender })} 172 | </div> 173 | ); 174 | } 175 | } 176 | 177 | export default withStyles({ 178 | app: { 179 | position: 'absolute', 180 | width: '100%', 181 | height: '100%', 182 | display: 'flex', 183 | flexDirection: 'column', 184 | }, 185 | main: { 186 | height: 100, 187 | flexGrow: 1, 188 | }, 189 | })(App); 190 | -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(<App />, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /src/api.js: -------------------------------------------------------------------------------- 1 | import { request } from 'graphql-request'; 2 | 3 | const endpoint = 'https://api.graph.cool/simple/v1/cjjwqys1q9395016079r79f4i'; 4 | 5 | export const STATUS = { 6 | NEW: 'NEW', 7 | FETCHING: 'FETCHING', 8 | READY: 'READY', 9 | ERROR: 'ERROR', 10 | }; 11 | 12 | export const requestTheme = toolUrl => { 13 | const query = ` 14 | query createTheme($toolUrl: String){ 15 | createTheme(query: $toolUrl) { 16 | overrides 17 | theme 18 | } 19 | }`; 20 | return request(endpoint, query, { toolUrl }).then(data => data.createTheme); 21 | }; 22 | 23 | const multiFetch = async fetchList => 24 | await Promise.all( 25 | fetchList.map(async item => { 26 | item.prefetch(item); 27 | return item.put(await item.fetch()); 28 | }) 29 | ); 30 | 31 | export const fetchThemes = async (themesList, updState) => { 32 | const fetchList = themesList 33 | .filter(theme => theme.status === STATUS.NEW) 34 | .map(theme => ({ 35 | comment: theme.query, 36 | prefetch: () => updState({ ...theme, status: STATUS.FETCHING }), 37 | fetch: async () => await requestTheme(theme.query), 38 | put: res => { 39 | updState({ ...theme, ...res, status: STATUS.READY }); 40 | }, 41 | })); 42 | const result = await multiFetch(fetchList); 43 | return result; 44 | }; 45 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | 7 | 8 | .Resizer { 9 | background: #000; 10 | opacity: 0.2; 11 | z-index: 1; 12 | -moz-box-sizing: border-box; 13 | -webkit-box-sizing: border-box; 14 | box-sizing: border-box; 15 | -moz-background-clip: padding; 16 | -webkit-background-clip: padding; 17 | background-clip: padding-box; 18 | } 19 | 20 | .Resizer:hover { 21 | -webkit-transition: all 2s ease; 22 | transition: all 2s ease; 23 | } 24 | 25 | .Resizer.horizontal { 26 | height: 11px; 27 | margin: -5px 0; 28 | border-top: 5px solid rgba(255, 255, 255, 0); 29 | border-bottom: 5px solid rgba(255, 255, 255, 0); 30 | cursor: row-resize; 31 | width: 100%; 32 | } 33 | 34 | .Resizer.horizontal:hover { 35 | border-top: 5px solid rgba(0, 0, 0, 0.5); 36 | border-bottom: 5px solid rgba(0, 0, 0, 0.5); 37 | } 38 | 39 | .Resizer.vertical { 40 | width: 11px; 41 | margin: 0 -5px; 42 | border-left: 5px solid rgba(255, 255, 255, 0); 43 | border-right: 5px solid rgba(255, 255, 255, 0); 44 | cursor: col-resize; 45 | } 46 | 47 | .Resizer.vertical:hover { 48 | border-left: 5px solid rgba(0, 0, 0, 0.5); 49 | border-right: 5px solid rgba(0, 0, 0, 0.5); 50 | } 51 | .Resizer.disabled { 52 | cursor: not-allowed; 53 | } 54 | .Resizer.disabled:hover { 55 | border-color: transparent; 56 | } 57 | 58 | /* Syntax highlighting */ 59 | .token.comment, 60 | .token.prolog, 61 | .token.doctype, 62 | .token.cdata { 63 | color: #90a4ae; 64 | } 65 | .token.punctuation { 66 | color: #9e9e9e; 67 | } 68 | .namespace { 69 | opacity: 0.7; 70 | } 71 | .token.property, 72 | .token.tag, 73 | .token.boolean, 74 | .token.number, 75 | .token.constant, 76 | .token.symbol, 77 | .token.deleted { 78 | color: #e91e63; 79 | } 80 | .token.selector, 81 | .token.attr-name, 82 | .token.string, 83 | .token.char, 84 | .token.builtin, 85 | .token.inserted { 86 | color: #4caf50; 87 | } 88 | .token.operator, 89 | .token.entity, 90 | .token.url, 91 | .language-css .token.string, 92 | .style .token.string { 93 | color: #795548; 94 | } 95 | .token.atrule, 96 | .token.attr-value, 97 | .token.keyword { 98 | color: #3f51b5; 99 | } 100 | .token.function { 101 | color: #f44336; 102 | } 103 | .token.regex, 104 | .token.important, 105 | .token.variable { 106 | color: #ff9800; 107 | } 108 | .token.important, 109 | .token.bold { 110 | font-weight: bold; 111 | } 112 | .token.italic { 113 | font-style: italic; 114 | } 115 | .token.entity { 116 | cursor: help; 117 | } 118 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import { MuiThemeProvider } from '@material-ui/core/styles'; 4 | import theme from './ui/theme'; 5 | import './index.css'; 6 | import App from './App'; 7 | import registerServiceWorker from './registerServiceWorker'; 8 | 9 | ReactDOM.render( 10 | <MuiThemeProvider theme={theme}> 11 | <App /> 12 | </MuiThemeProvider>, 13 | document.getElementById('root') 14 | ); 15 | registerServiceWorker(); 16 | -------------------------------------------------------------------------------- /src/libs/ntc.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | /* 3 | 4 | +-----------------------------------------------------------------+ 5 | | Created by Chirag Mehta - http://chir.ag/projects/ntc | 6 | |-----------------------------------------------------------------| 7 | | ntc js (Name that Color JavaScript) | 8 | +-----------------------------------------------------------------+ 9 | 10 | All the functions, code, lists etc. have been written specifically 11 | for the Name that Color JavaScript by Chirag Mehta unless otherwise 12 | specified. 13 | 14 | This script is released under the: Creative Commons License: 15 | Attribution 2.5 http://creativecommons.org/licenses/by/2.5/ 16 | 17 | Sample Usage: 18 | 19 | <script type="text/javascript" src="ntc.js"></script> 20 | 21 | <script type="text/javascript"> 22 | 23 | var n_match = ntc.name("#6195ED"); 24 | n_rgb = n_match[0]; // This is the RGB value of the closest matching color 25 | n_name = n_match[1]; // This is the text string for the name of the match 26 | n_exactmatch = n_match[2]; // True if exact color match, False if close-match 27 | 28 | alert(n_match); 29 | 30 | </script> 31 | 32 | */ 33 | 34 | export const ntc = { 35 | 36 | init: function() { 37 | var color, rgb, hsl; 38 | for(var i = 0; i < ntc.names.length; i++) 39 | { 40 | color = "#" + ntc.names[i][0]; 41 | rgb = ntc.rgb(color); 42 | hsl = ntc.hsl(color); 43 | ntc.names[i].push(rgb[0], rgb[1], rgb[2], hsl[0], hsl[1], hsl[2]); 44 | } 45 | }, 46 | 47 | name: function(color) { 48 | 49 | color = color.toUpperCase(); 50 | if(color.length < 3 || color.length > 7) 51 | return ["#000000", "Invalid Color: " + color, false]; 52 | if(color.length % 3 == 0) 53 | color = "#" + color; 54 | if(color.length == 4) 55 | color = "#" + color.substr(1, 1) + color.substr(1, 1) + color.substr(2, 1) + color.substr(2, 1) + color.substr(3, 1) + color.substr(3, 1); 56 | 57 | var rgb = ntc.rgb(color); 58 | var r = rgb[0], g = rgb[1], b = rgb[2]; 59 | var hsl = ntc.hsl(color); 60 | var h = hsl[0], s = hsl[1], l = hsl[2]; 61 | var ndf1 = 0, ndf2 = 0, ndf = 0; 62 | var cl = -1, df = -1; 63 | 64 | for(var i = 0; i < ntc.names.length; i++) 65 | { 66 | if(color == "#" + ntc.names[i][0]) 67 | return ["#" + ntc.names[i][0], ntc.names[i][1], true]; 68 | 69 | ndf1 = Math.pow(r - ntc.names[i][2], 2) + Math.pow(g - ntc.names[i][3], 2) + Math.pow(b - ntc.names[i][4], 2); 70 | ndf2 = Math.pow(h - ntc.names[i][5], 2) + Math.pow(s - ntc.names[i][6], 2) + Math.pow(l - ntc.names[i][7], 2); 71 | ndf = ndf1 + ndf2 * 2; 72 | if(df < 0 || df > ndf) 73 | { 74 | df = ndf; 75 | cl = i; 76 | } 77 | } 78 | 79 | return (cl < 0 ? ["#000000", "Invalid Color: " + color, false] : ["#" + ntc.names[cl][0], ntc.names[cl][1], false]); 80 | }, 81 | 82 | // adopted from: Farbtastic 1.2 83 | // http://acko.net/dev/farbtastic 84 | hsl: function (color) { 85 | 86 | var rgb = [parseInt('0x' + color.substring(1, 3)) / 255, parseInt('0x' + color.substring(3, 5)) / 255, parseInt('0x' + color.substring(5, 7)) / 255]; 87 | var min, max, delta, h, s, l; 88 | var r = rgb[0], g = rgb[1], b = rgb[2]; 89 | 90 | min = Math.min(r, Math.min(g, b)); 91 | max = Math.max(r, Math.max(g, b)); 92 | delta = max - min; 93 | l = (min + max) / 2; 94 | 95 | s = 0; 96 | if(l > 0 && l < 1) 97 | s = delta / (l < 0.5 ? (2 * l) : (2 - 2 * l)); 98 | 99 | h = 0; 100 | if(delta > 0) 101 | { 102 | if (max == r && max != g) h += (g - b) / delta; 103 | if (max == g && max != b) h += (2 + (b - r) / delta); 104 | if (max == b && max != r) h += (4 + (r - g) / delta); 105 | h /= 6; 106 | } 107 | return [parseInt(h * 255), parseInt(s * 255), parseInt(l * 255)]; 108 | }, 109 | 110 | // adopted from: Farbtastic 1.2 111 | // http://acko.net/dev/farbtastic 112 | rgb: function(color) { 113 | return [parseInt('0x' + color.substring(1, 3)), parseInt('0x' + color.substring(3, 5)), parseInt('0x' + color.substring(5, 7))]; 114 | }, 115 | 116 | names: [ 117 | ["000000", "Black"], 118 | ["000080", "Navy Blue"], 119 | ["0000C8", "Dark Blue"], 120 | ["0000FF", "Blue"], 121 | ["000741", "Stratos"], 122 | ["001B1C", "Swamp"], 123 | ["002387", "Resolution Blue"], 124 | ["002900", "Deep Fir"], 125 | ["002E20", "Burnham"], 126 | ["002FA7", "International Klein Blue"], 127 | ["003153", "Prussian Blue"], 128 | ["003366", "Midnight Blue"], 129 | ["003399", "Smalt"], 130 | ["003532", "Deep Teal"], 131 | ["003E40", "Cyprus"], 132 | ["004620", "Kaitoke Green"], 133 | ["0047AB", "Cobalt"], 134 | ["004816", "Crusoe"], 135 | ["004950", "Sherpa Blue"], 136 | ["0056A7", "Endeavour"], 137 | ["00581A", "Camarone"], 138 | ["0066CC", "Science Blue"], 139 | ["0066FF", "Blue Ribbon"], 140 | ["00755E", "Tropical Rain Forest"], 141 | ["0076A3", "Allports"], 142 | ["007BA7", "Deep Cerulean"], 143 | ["007EC7", "Lochmara"], 144 | ["007FFF", "Azure Radiance"], 145 | ["008080", "Teal"], 146 | ["0095B6", "Bondi Blue"], 147 | ["009DC4", "Pacific Blue"], 148 | ["00A693", "Persian Green"], 149 | ["00A86B", "Jade"], 150 | ["00CC99", "Caribbean Green"], 151 | ["00CCCC", "Robin's Egg Blue"], 152 | ["00FF00", "Green"], 153 | ["00FF7F", "Spring Green"], 154 | ["00FFFF", "Cyan / Aqua"], 155 | ["010D1A", "Blue Charcoal"], 156 | ["011635", "Midnight"], 157 | ["011D13", "Holly"], 158 | ["012731", "Daintree"], 159 | ["01361C", "Cardin Green"], 160 | ["01371A", "County Green"], 161 | ["013E62", "Astronaut Blue"], 162 | ["013F6A", "Regal Blue"], 163 | ["014B43", "Aqua Deep"], 164 | ["015E85", "Orient"], 165 | ["016162", "Blue Stone"], 166 | ["016D39", "Fun Green"], 167 | ["01796F", "Pine Green"], 168 | ["017987", "Blue Lagoon"], 169 | ["01826B", "Deep Sea"], 170 | ["01A368", "Green Haze"], 171 | ["022D15", "English Holly"], 172 | ["02402C", "Sherwood Green"], 173 | ["02478E", "Congress Blue"], 174 | ["024E46", "Evening Sea"], 175 | ["026395", "Bahama Blue"], 176 | ["02866F", "Observatory"], 177 | ["02A4D3", "Cerulean"], 178 | ["03163C", "Tangaroa"], 179 | ["032B52", "Green Vogue"], 180 | ["036A6E", "Mosque"], 181 | ["041004", "Midnight Moss"], 182 | ["041322", "Black Pearl"], 183 | ["042E4C", "Blue Whale"], 184 | ["044022", "Zuccini"], 185 | ["044259", "Teal Blue"], 186 | ["051040", "Deep Cove"], 187 | ["051657", "Gulf Blue"], 188 | ["055989", "Venice Blue"], 189 | ["056F57", "Watercourse"], 190 | ["062A78", "Catalina Blue"], 191 | ["063537", "Tiber"], 192 | ["069B81", "Gossamer"], 193 | ["06A189", "Niagara"], 194 | ["073A50", "Tarawera"], 195 | ["080110", "Jaguar"], 196 | ["081910", "Black Bean"], 197 | ["082567", "Deep Sapphire"], 198 | ["088370", "Elf Green"], 199 | ["08E8DE", "Bright Turquoise"], 200 | ["092256", "Downriver"], 201 | ["09230F", "Palm Green"], 202 | ["09255D", "Madison"], 203 | ["093624", "Bottle Green"], 204 | ["095859", "Deep Sea Green"], 205 | ["097F4B", "Salem"], 206 | ["0A001C", "Black Russian"], 207 | ["0A480D", "Dark Fern"], 208 | ["0A6906", "Japanese Laurel"], 209 | ["0A6F75", "Atoll"], 210 | ["0B0B0B", "Cod Gray"], 211 | ["0B0F08", "Marshland"], 212 | ["0B1107", "Gordons Green"], 213 | ["0B1304", "Black Forest"], 214 | ["0B6207", "San Felix"], 215 | ["0BDA51", "Malachite"], 216 | ["0C0B1D", "Ebony"], 217 | ["0C0D0F", "Woodsmoke"], 218 | ["0C1911", "Racing Green"], 219 | ["0C7A79", "Surfie Green"], 220 | ["0C8990", "Blue Chill"], 221 | ["0D0332", "Black Rock"], 222 | ["0D1117", "Bunker"], 223 | ["0D1C19", "Aztec"], 224 | ["0D2E1C", "Bush"], 225 | ["0E0E18", "Cinder"], 226 | ["0E2A30", "Firefly"], 227 | ["0F2D9E", "Torea Bay"], 228 | ["10121D", "Vulcan"], 229 | ["101405", "Green Waterloo"], 230 | ["105852", "Eden"], 231 | ["110C6C", "Arapawa"], 232 | ["120A8F", "Ultramarine"], 233 | ["123447", "Elephant"], 234 | ["126B40", "Jewel"], 235 | ["130000", "Diesel"], 236 | ["130A06", "Asphalt"], 237 | ["13264D", "Blue Zodiac"], 238 | ["134F19", "Parsley"], 239 | ["140600", "Nero"], 240 | ["1450AA", "Tory Blue"], 241 | ["151F4C", "Bunting"], 242 | ["1560BD", "Denim"], 243 | ["15736B", "Genoa"], 244 | ["161928", "Mirage"], 245 | ["161D10", "Hunter Green"], 246 | ["162A40", "Big Stone"], 247 | ["163222", "Celtic"], 248 | ["16322C", "Timber Green"], 249 | ["163531", "Gable Green"], 250 | ["171F04", "Pine Tree"], 251 | ["175579", "Chathams Blue"], 252 | ["182D09", "Deep Forest Green"], 253 | ["18587A", "Blumine"], 254 | ["19330E", "Palm Leaf"], 255 | ["193751", "Nile Blue"], 256 | ["1959A8", "Fun Blue"], 257 | ["1A1A68", "Lucky Point"], 258 | ["1AB385", "Mountain Meadow"], 259 | ["1B0245", "Tolopea"], 260 | ["1B1035", "Haiti"], 261 | ["1B127B", "Deep Koamaru"], 262 | ["1B1404", "Acadia"], 263 | ["1B2F11", "Seaweed"], 264 | ["1B3162", "Biscay"], 265 | ["1B659D", "Matisse"], 266 | ["1C1208", "Crowshead"], 267 | ["1C1E13", "Rangoon Green"], 268 | ["1C39BB", "Persian Blue"], 269 | ["1C402E", "Everglade"], 270 | ["1C7C7D", "Elm"], 271 | ["1D6142", "Green Pea"], 272 | ["1E0F04", "Creole"], 273 | ["1E1609", "Karaka"], 274 | ["1E1708", "El Paso"], 275 | ["1E385B", "Cello"], 276 | ["1E433C", "Te Papa Green"], 277 | ["1E90FF", "Dodger Blue"], 278 | ["1E9AB0", "Eastern Blue"], 279 | ["1F120F", "Night Rider"], 280 | ["1FC2C2", "Java"], 281 | ["20208D", "Jacksons Purple"], 282 | ["202E54", "Cloud Burst"], 283 | ["204852", "Blue Dianne"], 284 | ["211A0E", "Eternity"], 285 | ["220878", "Deep Blue"], 286 | ["228B22", "Forest Green"], 287 | ["233418", "Mallard"], 288 | ["240A40", "Violet"], 289 | ["240C02", "Kilamanjaro"], 290 | ["242A1D", "Log Cabin"], 291 | ["242E16", "Black Olive"], 292 | ["24500F", "Green House"], 293 | ["251607", "Graphite"], 294 | ["251706", "Cannon Black"], 295 | ["251F4F", "Port Gore"], 296 | ["25272C", "Shark"], 297 | ["25311C", "Green Kelp"], 298 | ["2596D1", "Curious Blue"], 299 | ["260368", "Paua"], 300 | ["26056A", "Paris M"], 301 | ["261105", "Wood Bark"], 302 | ["261414", "Gondola"], 303 | ["262335", "Steel Gray"], 304 | ["26283B", "Ebony Clay"], 305 | ["273A81", "Bay of Many"], 306 | ["27504B", "Plantation"], 307 | ["278A5B", "Eucalyptus"], 308 | ["281E15", "Oil"], 309 | ["283A77", "Astronaut"], 310 | ["286ACD", "Mariner"], 311 | ["290C5E", "Violent Violet"], 312 | ["292130", "Bastille"], 313 | ["292319", "Zeus"], 314 | ["292937", "Charade"], 315 | ["297B9A", "Jelly Bean"], 316 | ["29AB87", "Jungle Green"], 317 | ["2A0359", "Cherry Pie"], 318 | ["2A140E", "Coffee Bean"], 319 | ["2A2630", "Baltic Sea"], 320 | ["2A380B", "Turtle Green"], 321 | ["2A52BE", "Cerulean Blue"], 322 | ["2B0202", "Sepia Black"], 323 | ["2B194F", "Valhalla"], 324 | ["2B3228", "Heavy Metal"], 325 | ["2C0E8C", "Blue Gem"], 326 | ["2C1632", "Revolver"], 327 | ["2C2133", "Bleached Cedar"], 328 | ["2C8C84", "Lochinvar"], 329 | ["2D2510", "Mikado"], 330 | ["2D383A", "Outer Space"], 331 | ["2D569B", "St Tropaz"], 332 | ["2E0329", "Jacaranda"], 333 | ["2E1905", "Jacko Bean"], 334 | ["2E3222", "Rangitoto"], 335 | ["2E3F62", "Rhino"], 336 | ["2E8B57", "Sea Green"], 337 | ["2EBFD4", "Scooter"], 338 | ["2F270E", "Onion"], 339 | ["2F3CB3", "Governor Bay"], 340 | ["2F519E", "Sapphire"], 341 | ["2F5A57", "Spectra"], 342 | ["2F6168", "Casal"], 343 | ["300529", "Melanzane"], 344 | ["301F1E", "Cocoa Brown"], 345 | ["302A0F", "Woodrush"], 346 | ["304B6A", "San Juan"], 347 | ["30D5C8", "Turquoise"], 348 | ["311C17", "Eclipse"], 349 | ["314459", "Pickled Bluewood"], 350 | ["315BA1", "Azure"], 351 | ["31728D", "Calypso"], 352 | ["317D82", "Paradiso"], 353 | ["32127A", "Persian Indigo"], 354 | ["32293A", "Blackcurrant"], 355 | ["323232", "Mine Shaft"], 356 | ["325D52", "Stromboli"], 357 | ["327C14", "Bilbao"], 358 | ["327DA0", "Astral"], 359 | ["33036B", "Christalle"], 360 | ["33292F", "Thunder"], 361 | ["33CC99", "Shamrock"], 362 | ["341515", "Tamarind"], 363 | ["350036", "Mardi Gras"], 364 | ["350E42", "Valentino"], 365 | ["350E57", "Jagger"], 366 | ["353542", "Tuna"], 367 | ["354E8C", "Chambray"], 368 | ["363050", "Martinique"], 369 | ["363534", "Tuatara"], 370 | ["363C0D", "Waiouru"], 371 | ["36747D", "Ming"], 372 | ["368716", "La Palma"], 373 | ["370202", "Chocolate"], 374 | ["371D09", "Clinker"], 375 | ["37290E", "Brown Tumbleweed"], 376 | ["373021", "Birch"], 377 | ["377475", "Oracle"], 378 | ["380474", "Blue Diamond"], 379 | ["381A51", "Grape"], 380 | ["383533", "Dune"], 381 | ["384555", "Oxford Blue"], 382 | ["384910", "Clover"], 383 | ["394851", "Limed Spruce"], 384 | ["396413", "Dell"], 385 | ["3A0020", "Toledo"], 386 | ["3A2010", "Sambuca"], 387 | ["3A2A6A", "Jacarta"], 388 | ["3A686C", "William"], 389 | ["3A6A47", "Killarney"], 390 | ["3AB09E", "Keppel"], 391 | ["3B000B", "Temptress"], 392 | ["3B0910", "Aubergine"], 393 | ["3B1F1F", "Jon"], 394 | ["3B2820", "Treehouse"], 395 | ["3B7A57", "Amazon"], 396 | ["3B91B4", "Boston Blue"], 397 | ["3C0878", "Windsor"], 398 | ["3C1206", "Rebel"], 399 | ["3C1F76", "Meteorite"], 400 | ["3C2005", "Dark Ebony"], 401 | ["3C3910", "Camouflage"], 402 | ["3C4151", "Bright Gray"], 403 | ["3C4443", "Cape Cod"], 404 | ["3C493A", "Lunar Green"], 405 | ["3D0C02", "Bean "], 406 | ["3D2B1F", "Bistre"], 407 | ["3D7D52", "Goblin"], 408 | ["3E0480", "Kingfisher Daisy"], 409 | ["3E1C14", "Cedar"], 410 | ["3E2B23", "English Walnut"], 411 | ["3E2C1C", "Black Marlin"], 412 | ["3E3A44", "Ship Gray"], 413 | ["3EABBF", "Pelorous"], 414 | ["3F2109", "Bronze"], 415 | ["3F2500", "Cola"], 416 | ["3F3002", "Madras"], 417 | ["3F307F", "Minsk"], 418 | ["3F4C3A", "Cabbage Pont"], 419 | ["3F583B", "Tom Thumb"], 420 | ["3F5D53", "Mineral Green"], 421 | ["3FC1AA", "Puerto Rico"], 422 | ["3FFF00", "Harlequin"], 423 | ["401801", "Brown Pod"], 424 | ["40291D", "Cork"], 425 | ["403B38", "Masala"], 426 | ["403D19", "Thatch Green"], 427 | ["405169", "Fiord"], 428 | ["40826D", "Viridian"], 429 | ["40A860", "Chateau Green"], 430 | ["410056", "Ripe Plum"], 431 | ["411F10", "Paco"], 432 | ["412010", "Deep Oak"], 433 | ["413C37", "Merlin"], 434 | ["414257", "Gun Powder"], 435 | ["414C7D", "East Bay"], 436 | ["4169E1", "Royal Blue"], 437 | ["41AA78", "Ocean Green"], 438 | ["420303", "Burnt Maroon"], 439 | ["423921", "Lisbon Brown"], 440 | ["427977", "Faded Jade"], 441 | ["431560", "Scarlet Gum"], 442 | ["433120", "Iroko"], 443 | ["433E37", "Armadillo"], 444 | ["434C59", "River Bed"], 445 | ["436A0D", "Green Leaf"], 446 | ["44012D", "Barossa"], 447 | ["441D00", "Morocco Brown"], 448 | ["444954", "Mako"], 449 | ["454936", "Kelp"], 450 | ["456CAC", "San Marino"], 451 | ["45B1E8", "Picton Blue"], 452 | ["460B41", "Loulou"], 453 | ["462425", "Crater Brown"], 454 | ["465945", "Gray Asparagus"], 455 | ["4682B4", "Steel Blue"], 456 | ["480404", "Rustic Red"], 457 | ["480607", "Bulgarian Rose"], 458 | ["480656", "Clairvoyant"], 459 | ["481C1C", "Cocoa Bean"], 460 | ["483131", "Woody Brown"], 461 | ["483C32", "Taupe"], 462 | ["49170C", "Van Cleef"], 463 | ["492615", "Brown Derby"], 464 | ["49371B", "Metallic Bronze"], 465 | ["495400", "Verdun Green"], 466 | ["496679", "Blue Bayoux"], 467 | ["497183", "Bismark"], 468 | ["4A2A04", "Bracken"], 469 | ["4A3004", "Deep Bronze"], 470 | ["4A3C30", "Mondo"], 471 | ["4A4244", "Tundora"], 472 | ["4A444B", "Gravel"], 473 | ["4A4E5A", "Trout"], 474 | ["4B0082", "Pigment Indigo"], 475 | ["4B5D52", "Nandor"], 476 | ["4C3024", "Saddle"], 477 | ["4C4F56", "Abbey"], 478 | ["4D0135", "Blackberry"], 479 | ["4D0A18", "Cab Sav"], 480 | ["4D1E01", "Indian Tan"], 481 | ["4D282D", "Cowboy"], 482 | ["4D282E", "Livid Brown"], 483 | ["4D3833", "Rock"], 484 | ["4D3D14", "Punga"], 485 | ["4D400F", "Bronzetone"], 486 | ["4D5328", "Woodland"], 487 | ["4E0606", "Mahogany"], 488 | ["4E2A5A", "Bossanova"], 489 | ["4E3B41", "Matterhorn"], 490 | ["4E420C", "Bronze Olive"], 491 | ["4E4562", "Mulled Wine"], 492 | ["4E6649", "Axolotl"], 493 | ["4E7F9E", "Wedgewood"], 494 | ["4EABD1", "Shakespeare"], 495 | ["4F1C70", "Honey Flower"], 496 | ["4F2398", "Daisy Bush"], 497 | ["4F69C6", "Indigo"], 498 | ["4F7942", "Fern Green"], 499 | ["4F9D5D", "Fruit Salad"], 500 | ["4FA83D", "Apple"], 501 | ["504351", "Mortar"], 502 | ["507096", "Kashmir Blue"], 503 | ["507672", "Cutty Sark"], 504 | ["50C878", "Emerald"], 505 | ["514649", "Emperor"], 506 | ["516E3D", "Chalet Green"], 507 | ["517C66", "Como"], 508 | ["51808F", "Smalt Blue"], 509 | ["52001F", "Castro"], 510 | ["520C17", "Maroon Oak"], 511 | ["523C94", "Gigas"], 512 | ["533455", "Voodoo"], 513 | ["534491", "Victoria"], 514 | ["53824B", "Hippie Green"], 515 | ["541012", "Heath"], 516 | ["544333", "Judge Gray"], 517 | ["54534D", "Fuscous Gray"], 518 | ["549019", "Vida Loca"], 519 | ["55280C", "Cioccolato"], 520 | ["555B10", "Saratoga"], 521 | ["556D56", "Finlandia"], 522 | ["5590D9", "Havelock Blue"], 523 | ["56B4BE", "Fountain Blue"], 524 | ["578363", "Spring Leaves"], 525 | ["583401", "Saddle Brown"], 526 | ["585562", "Scarpa Flow"], 527 | ["587156", "Cactus"], 528 | ["589AAF", "Hippie Blue"], 529 | ["591D35", "Wine Berry"], 530 | ["592804", "Brown Bramble"], 531 | ["593737", "Congo Brown"], 532 | ["594433", "Millbrook"], 533 | ["5A6E9C", "Waikawa Gray"], 534 | ["5A87A0", "Horizon"], 535 | ["5B3013", "Jambalaya"], 536 | ["5C0120", "Bordeaux"], 537 | ["5C0536", "Mulberry Wood"], 538 | ["5C2E01", "Carnaby Tan"], 539 | ["5C5D75", "Comet"], 540 | ["5D1E0F", "Redwood"], 541 | ["5D4C51", "Don Juan"], 542 | ["5D5C58", "Chicago"], 543 | ["5D5E37", "Verdigris"], 544 | ["5D7747", "Dingley"], 545 | ["5DA19F", "Breaker Bay"], 546 | ["5E483E", "Kabul"], 547 | ["5E5D3B", "Hemlock"], 548 | ["5F3D26", "Irish Coffee"], 549 | ["5F5F6E", "Mid Gray"], 550 | ["5F6672", "Shuttle Gray"], 551 | ["5FA777", "Aqua Forest"], 552 | ["5FB3AC", "Tradewind"], 553 | ["604913", "Horses Neck"], 554 | ["605B73", "Smoky"], 555 | ["606E68", "Corduroy"], 556 | ["6093D1", "Danube"], 557 | ["612718", "Espresso"], 558 | ["614051", "Eggplant"], 559 | ["615D30", "Costa Del Sol"], 560 | ["61845F", "Glade Green"], 561 | ["622F30", "Buccaneer"], 562 | ["623F2D", "Quincy"], 563 | ["624E9A", "Butterfly Bush"], 564 | ["625119", "West Coast"], 565 | ["626649", "Finch"], 566 | ["639A8F", "Patina"], 567 | ["63B76C", "Fern"], 568 | ["6456B7", "Blue Violet"], 569 | ["646077", "Dolphin"], 570 | ["646463", "Storm Dust"], 571 | ["646A54", "Siam"], 572 | ["646E75", "Nevada"], 573 | ["6495ED", "Cornflower Blue"], 574 | ["64CCDB", "Viking"], 575 | ["65000B", "Rosewood"], 576 | ["651A14", "Cherrywood"], 577 | ["652DC1", "Purple Heart"], 578 | ["657220", "Fern Frond"], 579 | ["65745D", "Willow Grove"], 580 | ["65869F", "Hoki"], 581 | ["660045", "Pompadour"], 582 | ["660099", "Purple"], 583 | ["66023C", "Tyrian Purple"], 584 | ["661010", "Dark Tan"], 585 | ["66B58F", "Silver Tree"], 586 | ["66FF00", "Bright Green"], 587 | ["66FF66", "Screamin' Green"], 588 | ["67032D", "Black Rose"], 589 | ["675FA6", "Scampi"], 590 | ["676662", "Ironside Gray"], 591 | ["678975", "Viridian Green"], 592 | ["67A712", "Christi"], 593 | ["683600", "Nutmeg Wood Finish"], 594 | ["685558", "Zambezi"], 595 | ["685E6E", "Salt Box"], 596 | ["692545", "Tawny Port"], 597 | ["692D54", "Finn"], 598 | ["695F62", "Scorpion"], 599 | ["697E9A", "Lynch"], 600 | ["6A442E", "Spice"], 601 | ["6A5D1B", "Himalaya"], 602 | ["6A6051", "Soya Bean"], 603 | ["6B2A14", "Hairy Heath"], 604 | ["6B3FA0", "Royal Purple"], 605 | ["6B4E31", "Shingle Fawn"], 606 | ["6B5755", "Dorado"], 607 | ["6B8BA2", "Bermuda Gray"], 608 | ["6B8E23", "Olive Drab"], 609 | ["6C3082", "Eminence"], 610 | ["6CDAE7", "Turquoise Blue"], 611 | ["6D0101", "Lonestar"], 612 | ["6D5E54", "Pine Cone"], 613 | ["6D6C6C", "Dove Gray"], 614 | ["6D9292", "Juniper"], 615 | ["6D92A1", "Gothic"], 616 | ["6E0902", "Red Oxide"], 617 | ["6E1D14", "Moccaccino"], 618 | ["6E4826", "Pickled Bean"], 619 | ["6E4B26", "Dallas"], 620 | ["6E6D57", "Kokoda"], 621 | ["6E7783", "Pale Sky"], 622 | ["6F440C", "Cafe Royale"], 623 | ["6F6A61", "Flint"], 624 | ["6F8E63", "Highland"], 625 | ["6F9D02", "Limeade"], 626 | ["6FD0C5", "Downy"], 627 | ["701C1C", "Persian Plum"], 628 | ["704214", "Sepia"], 629 | ["704A07", "Antique Bronze"], 630 | ["704F50", "Ferra"], 631 | ["706555", "Coffee"], 632 | ["708090", "Slate Gray"], 633 | ["711A00", "Cedar Wood Finish"], 634 | ["71291D", "Metallic Copper"], 635 | ["714693", "Affair"], 636 | ["714AB2", "Studio"], 637 | ["715D47", "Tobacco Brown"], 638 | ["716338", "Yellow Metal"], 639 | ["716B56", "Peat"], 640 | ["716E10", "Olivetone"], 641 | ["717486", "Storm Gray"], 642 | ["718080", "Sirocco"], 643 | ["71D9E2", "Aquamarine Blue"], 644 | ["72010F", "Venetian Red"], 645 | ["724A2F", "Old Copper"], 646 | ["726D4E", "Go Ben"], 647 | ["727B89", "Raven"], 648 | ["731E8F", "Seance"], 649 | ["734A12", "Raw Umber"], 650 | ["736C9F", "Kimberly"], 651 | ["736D58", "Crocodile"], 652 | ["737829", "Crete"], 653 | ["738678", "Xanadu"], 654 | ["74640D", "Spicy Mustard"], 655 | ["747D63", "Limed Ash"], 656 | ["747D83", "Rolling Stone"], 657 | ["748881", "Blue Smoke"], 658 | ["749378", "Laurel"], 659 | ["74C365", "Mantis"], 660 | ["755A57", "Russett"], 661 | ["7563A8", "Deluge"], 662 | ["76395D", "Cosmic"], 663 | ["7666C6", "Blue Marguerite"], 664 | ["76BD17", "Lima"], 665 | ["76D7EA", "Sky Blue"], 666 | ["770F05", "Dark Burgundy"], 667 | ["771F1F", "Crown of Thorns"], 668 | ["773F1A", "Walnut"], 669 | ["776F61", "Pablo"], 670 | ["778120", "Pacifika"], 671 | ["779E86", "Oxley"], 672 | ["77DD77", "Pastel Green"], 673 | ["780109", "Japanese Maple"], 674 | ["782D19", "Mocha"], 675 | ["782F16", "Peanut"], 676 | ["78866B", "Camouflage Green"], 677 | ["788A25", "Wasabi"], 678 | ["788BBA", "Ship Cove"], 679 | ["78A39C", "Sea Nymph"], 680 | ["795D4C", "Roman Coffee"], 681 | ["796878", "Old Lavender"], 682 | ["796989", "Rum"], 683 | ["796A78", "Fedora"], 684 | ["796D62", "Sandstone"], 685 | ["79DEEC", "Spray"], 686 | ["7A013A", "Siren"], 687 | ["7A58C1", "Fuchsia Blue"], 688 | ["7A7A7A", "Boulder"], 689 | ["7A89B8", "Wild Blue Yonder"], 690 | ["7AC488", "De York"], 691 | ["7B3801", "Red Beech"], 692 | ["7B3F00", "Cinnamon"], 693 | ["7B6608", "Yukon Gold"], 694 | ["7B7874", "Tapa"], 695 | ["7B7C94", "Waterloo "], 696 | ["7B8265", "Flax Smoke"], 697 | ["7B9F80", "Amulet"], 698 | ["7BA05B", "Asparagus"], 699 | ["7C1C05", "Kenyan Copper"], 700 | ["7C7631", "Pesto"], 701 | ["7C778A", "Topaz"], 702 | ["7C7B7A", "Concord"], 703 | ["7C7B82", "Jumbo"], 704 | ["7C881A", "Trendy Green"], 705 | ["7CA1A6", "Gumbo"], 706 | ["7CB0A1", "Acapulco"], 707 | ["7CB7BB", "Neptune"], 708 | ["7D2C14", "Pueblo"], 709 | ["7DA98D", "Bay Leaf"], 710 | ["7DC8F7", "Malibu"], 711 | ["7DD8C6", "Bermuda"], 712 | ["7E3A15", "Copper Canyon"], 713 | ["7F1734", "Claret"], 714 | ["7F3A02", "Peru Tan"], 715 | ["7F626D", "Falcon"], 716 | ["7F7589", "Mobster"], 717 | ["7F76D3", "Moody Blue"], 718 | ["7FFF00", "Chartreuse"], 719 | ["7FFFD4", "Aquamarine"], 720 | ["800000", "Maroon"], 721 | ["800B47", "Rose Bud Cherry"], 722 | ["801818", "Falu Red"], 723 | ["80341F", "Red Robin"], 724 | ["803790", "Vivid Violet"], 725 | ["80461B", "Russet"], 726 | ["807E79", "Friar Gray"], 727 | ["808000", "Olive"], 728 | ["808080", "Gray"], 729 | ["80B3AE", "Gulf Stream"], 730 | ["80B3C4", "Glacier"], 731 | ["80CCEA", "Seagull"], 732 | ["81422C", "Nutmeg"], 733 | ["816E71", "Spicy Pink"], 734 | ["817377", "Empress"], 735 | ["819885", "Spanish Green"], 736 | ["826F65", "Sand Dune"], 737 | ["828685", "Gunsmoke"], 738 | ["828F72", "Battleship Gray"], 739 | ["831923", "Merlot"], 740 | ["837050", "Shadow"], 741 | ["83AA5D", "Chelsea Cucumber"], 742 | ["83D0C6", "Monte Carlo"], 743 | ["843179", "Plum"], 744 | ["84A0A0", "Granny Smith"], 745 | ["8581D9", "Chetwode Blue"], 746 | ["858470", "Bandicoot"], 747 | ["859FAF", "Bali Hai"], 748 | ["85C4CC", "Half Baked"], 749 | ["860111", "Red Devil"], 750 | ["863C3C", "Lotus"], 751 | ["86483C", "Ironstone"], 752 | ["864D1E", "Bull Shot"], 753 | ["86560A", "Rusty Nail"], 754 | ["868974", "Bitter"], 755 | ["86949F", "Regent Gray"], 756 | ["871550", "Disco"], 757 | ["87756E", "Americano"], 758 | ["877C7B", "Hurricane"], 759 | ["878D91", "Oslo Gray"], 760 | ["87AB39", "Sushi"], 761 | ["885342", "Spicy Mix"], 762 | ["886221", "Kumera"], 763 | ["888387", "Suva Gray"], 764 | ["888D65", "Avocado"], 765 | ["893456", "Camelot"], 766 | ["893843", "Solid Pink"], 767 | ["894367", "Cannon Pink"], 768 | ["897D6D", "Makara"], 769 | ["8A3324", "Burnt Umber"], 770 | ["8A73D6", "True V"], 771 | ["8A8360", "Clay Creek"], 772 | ["8A8389", "Monsoon"], 773 | ["8A8F8A", "Stack"], 774 | ["8AB9F1", "Jordy Blue"], 775 | ["8B00FF", "Electric Violet"], 776 | ["8B0723", "Monarch"], 777 | ["8B6B0B", "Corn Harvest"], 778 | ["8B8470", "Olive Haze"], 779 | ["8B847E", "Schooner"], 780 | ["8B8680", "Natural Gray"], 781 | ["8B9C90", "Mantle"], 782 | ["8B9FEE", "Portage"], 783 | ["8BA690", "Envy"], 784 | ["8BA9A5", "Cascade"], 785 | ["8BE6D8", "Riptide"], 786 | ["8C055E", "Cardinal Pink"], 787 | ["8C472F", "Mule Fawn"], 788 | ["8C5738", "Potters Clay"], 789 | ["8C6495", "Trendy Pink"], 790 | ["8D0226", "Paprika"], 791 | ["8D3D38", "Sanguine Brown"], 792 | ["8D3F3F", "Tosca"], 793 | ["8D7662", "Cement"], 794 | ["8D8974", "Granite Green"], 795 | ["8D90A1", "Manatee"], 796 | ["8DA8CC", "Polo Blue"], 797 | ["8E0000", "Red Berry"], 798 | ["8E4D1E", "Rope"], 799 | ["8E6F70", "Opium"], 800 | ["8E775E", "Domino"], 801 | ["8E8190", "Mamba"], 802 | ["8EABC1", "Nepal"], 803 | ["8F021C", "Pohutukawa"], 804 | ["8F3E33", "El Salva"], 805 | ["8F4B0E", "Korma"], 806 | ["8F8176", "Squirrel"], 807 | ["8FD6B4", "Vista Blue"], 808 | ["900020", "Burgundy"], 809 | ["901E1E", "Old Brick"], 810 | ["907874", "Hemp"], 811 | ["907B71", "Almond Frost"], 812 | ["908D39", "Sycamore"], 813 | ["92000A", "Sangria"], 814 | ["924321", "Cumin"], 815 | ["926F5B", "Beaver"], 816 | ["928573", "Stonewall"], 817 | ["928590", "Venus"], 818 | ["9370DB", "Medium Purple"], 819 | ["93CCEA", "Cornflower"], 820 | ["93DFB8", "Algae Green"], 821 | ["944747", "Copper Rust"], 822 | ["948771", "Arrowtown"], 823 | ["950015", "Scarlett"], 824 | ["956387", "Strikemaster"], 825 | ["959396", "Mountain Mist"], 826 | ["960018", "Carmine"], 827 | ["964B00", "Brown"], 828 | ["967059", "Leather"], 829 | ["9678B6", "Purple Mountain's Majesty"], 830 | ["967BB6", "Lavender Purple"], 831 | ["96A8A1", "Pewter"], 832 | ["96BBAB", "Summer Green"], 833 | ["97605D", "Au Chico"], 834 | ["9771B5", "Wisteria"], 835 | ["97CD2D", "Atlantis"], 836 | ["983D61", "Vin Rouge"], 837 | ["9874D3", "Lilac Bush"], 838 | ["98777B", "Bazaar"], 839 | ["98811B", "Hacienda"], 840 | ["988D77", "Pale Oyster"], 841 | ["98FF98", "Mint Green"], 842 | ["990066", "Fresh Eggplant"], 843 | ["991199", "Violet Eggplant"], 844 | ["991613", "Tamarillo"], 845 | ["991B07", "Totem Pole"], 846 | ["996666", "Copper Rose"], 847 | ["9966CC", "Amethyst"], 848 | ["997A8D", "Mountbatten Pink"], 849 | ["9999CC", "Blue Bell"], 850 | ["9A3820", "Prairie Sand"], 851 | ["9A6E61", "Toast"], 852 | ["9A9577", "Gurkha"], 853 | ["9AB973", "Olivine"], 854 | ["9AC2B8", "Shadow Green"], 855 | ["9B4703", "Oregon"], 856 | ["9B9E8F", "Lemon Grass"], 857 | ["9C3336", "Stiletto"], 858 | ["9D5616", "Hawaiian Tan"], 859 | ["9DACB7", "Gull Gray"], 860 | ["9DC209", "Pistachio"], 861 | ["9DE093", "Granny Smith Apple"], 862 | ["9DE5FF", "Anakiwa"], 863 | ["9E5302", "Chelsea Gem"], 864 | ["9E5B40", "Sepia Skin"], 865 | ["9EA587", "Sage"], 866 | ["9EA91F", "Citron"], 867 | ["9EB1CD", "Rock Blue"], 868 | ["9EDEE0", "Morning Glory"], 869 | ["9F381D", "Cognac"], 870 | ["9F821C", "Reef Gold"], 871 | ["9F9F9C", "Star Dust"], 872 | ["9FA0B1", "Santas Gray"], 873 | ["9FD7D3", "Sinbad"], 874 | ["9FDD8C", "Feijoa"], 875 | ["A02712", "Tabasco"], 876 | ["A1750D", "Buttered Rum"], 877 | ["A1ADB5", "Hit Gray"], 878 | ["A1C50A", "Citrus"], 879 | ["A1DAD7", "Aqua Island"], 880 | ["A1E9DE", "Water Leaf"], 881 | ["A2006D", "Flirt"], 882 | ["A23B6C", "Rouge"], 883 | ["A26645", "Cape Palliser"], 884 | ["A2AAB3", "Gray Chateau"], 885 | ["A2AEAB", "Edward"], 886 | ["A3807B", "Pharlap"], 887 | ["A397B4", "Amethyst Smoke"], 888 | ["A3E3ED", "Blizzard Blue"], 889 | ["A4A49D", "Delta"], 890 | ["A4A6D3", "Wistful"], 891 | ["A4AF6E", "Green Smoke"], 892 | ["A50B5E", "Jazzberry Jam"], 893 | ["A59B91", "Zorba"], 894 | ["A5CB0C", "Bahia"], 895 | ["A62F20", "Roof Terracotta"], 896 | ["A65529", "Paarl"], 897 | ["A68B5B", "Barley Corn"], 898 | ["A69279", "Donkey Brown"], 899 | ["A6A29A", "Dawn"], 900 | ["A72525", "Mexican Red"], 901 | ["A7882C", "Luxor Gold"], 902 | ["A85307", "Rich Gold"], 903 | ["A86515", "Reno Sand"], 904 | ["A86B6B", "Coral Tree"], 905 | ["A8989B", "Dusty Gray"], 906 | ["A899E6", "Dull Lavender"], 907 | ["A8A589", "Tallow"], 908 | ["A8AE9C", "Bud"], 909 | ["A8AF8E", "Locust"], 910 | ["A8BD9F", "Norway"], 911 | ["A8E3BD", "Chinook"], 912 | ["A9A491", "Gray Olive"], 913 | ["A9ACB6", "Aluminium"], 914 | ["A9B2C3", "Cadet Blue"], 915 | ["A9B497", "Schist"], 916 | ["A9BDBF", "Tower Gray"], 917 | ["A9BEF2", "Perano"], 918 | ["A9C6C2", "Opal"], 919 | ["AA375A", "Night Shadz"], 920 | ["AA4203", "Fire"], 921 | ["AA8B5B", "Muesli"], 922 | ["AA8D6F", "Sandal"], 923 | ["AAA5A9", "Shady Lady"], 924 | ["AAA9CD", "Logan"], 925 | ["AAABB7", "Spun Pearl"], 926 | ["AAD6E6", "Regent St Blue"], 927 | ["AAF0D1", "Magic Mint"], 928 | ["AB0563", "Lipstick"], 929 | ["AB3472", "Royal Heath"], 930 | ["AB917A", "Sandrift"], 931 | ["ABA0D9", "Cold Purple"], 932 | ["ABA196", "Bronco"], 933 | ["AC8A56", "Limed Oak"], 934 | ["AC91CE", "East Side"], 935 | ["AC9E22", "Lemon Ginger"], 936 | ["ACA494", "Napa"], 937 | ["ACA586", "Hillary"], 938 | ["ACA59F", "Cloudy"], 939 | ["ACACAC", "Silver Chalice"], 940 | ["ACB78E", "Swamp Green"], 941 | ["ACCBB1", "Spring Rain"], 942 | ["ACDD4D", "Conifer"], 943 | ["ACE1AF", "Celadon"], 944 | ["AD781B", "Mandalay"], 945 | ["ADBED1", "Casper"], 946 | ["ADDFAD", "Moss Green"], 947 | ["ADE6C4", "Padua"], 948 | ["ADFF2F", "Green Yellow"], 949 | ["AE4560", "Hippie Pink"], 950 | ["AE6020", "Desert"], 951 | ["AE809E", "Bouquet"], 952 | ["AF4035", "Medium Carmine"], 953 | ["AF4D43", "Apple Blossom"], 954 | ["AF593E", "Brown Rust"], 955 | ["AF8751", "Driftwood"], 956 | ["AF8F2C", "Alpine"], 957 | ["AF9F1C", "Lucky"], 958 | ["AFA09E", "Martini"], 959 | ["AFB1B8", "Bombay"], 960 | ["AFBDD9", "Pigeon Post"], 961 | ["B04C6A", "Cadillac"], 962 | ["B05D54", "Matrix"], 963 | ["B05E81", "Tapestry"], 964 | ["B06608", "Mai Tai"], 965 | ["B09A95", "Del Rio"], 966 | ["B0E0E6", "Powder Blue"], 967 | ["B0E313", "Inch Worm"], 968 | ["B10000", "Bright Red"], 969 | ["B14A0B", "Vesuvius"], 970 | ["B1610B", "Pumpkin Skin"], 971 | ["B16D52", "Santa Fe"], 972 | ["B19461", "Teak"], 973 | ["B1E2C1", "Fringy Flower"], 974 | ["B1F4E7", "Ice Cold"], 975 | ["B20931", "Shiraz"], 976 | ["B2A1EA", "Biloba Flower"], 977 | ["B32D29", "Tall Poppy"], 978 | ["B35213", "Fiery Orange"], 979 | ["B38007", "Hot Toddy"], 980 | ["B3AF95", "Taupe Gray"], 981 | ["B3C110", "La Rioja"], 982 | ["B43332", "Well Read"], 983 | ["B44668", "Blush"], 984 | ["B4CFD3", "Jungle Mist"], 985 | ["B57281", "Turkish Rose"], 986 | ["B57EDC", "Lavender"], 987 | ["B5A27F", "Mongoose"], 988 | ["B5B35C", "Olive Green"], 989 | ["B5D2CE", "Jet Stream"], 990 | ["B5ECDF", "Cruise"], 991 | ["B6316C", "Hibiscus"], 992 | ["B69D98", "Thatch"], 993 | ["B6B095", "Heathered Gray"], 994 | ["B6BAA4", "Eagle"], 995 | ["B6D1EA", "Spindle"], 996 | ["B6D3BF", "Gum Leaf"], 997 | ["B7410E", "Rust"], 998 | ["B78E5C", "Muddy Waters"], 999 | ["B7A214", "Sahara"], 1000 | ["B7A458", "Husk"], 1001 | ["B7B1B1", "Nobel"], 1002 | ["B7C3D0", "Heather"], 1003 | ["B7F0BE", "Madang"], 1004 | ["B81104", "Milano Red"], 1005 | ["B87333", "Copper"], 1006 | ["B8B56A", "Gimblet"], 1007 | ["B8C1B1", "Green Spring"], 1008 | ["B8C25D", "Celery"], 1009 | ["B8E0F9", "Sail"], 1010 | ["B94E48", "Chestnut"], 1011 | ["B95140", "Crail"], 1012 | ["B98D28", "Marigold"], 1013 | ["B9C46A", "Wild Willow"], 1014 | ["B9C8AC", "Rainee"], 1015 | ["BA0101", "Guardsman Red"], 1016 | ["BA450C", "Rock Spray"], 1017 | ["BA6F1E", "Bourbon"], 1018 | ["BA7F03", "Pirate Gold"], 1019 | ["BAB1A2", "Nomad"], 1020 | ["BAC7C9", "Submarine"], 1021 | ["BAEEF9", "Charlotte"], 1022 | ["BB3385", "Medium Red Violet"], 1023 | ["BB8983", "Brandy Rose"], 1024 | ["BBD009", "Rio Grande"], 1025 | ["BBD7C1", "Surf"], 1026 | ["BCC9C2", "Powder Ash"], 1027 | ["BD5E2E", "Tuscany"], 1028 | ["BD978E", "Quicksand"], 1029 | ["BDB1A8", "Silk"], 1030 | ["BDB2A1", "Malta"], 1031 | ["BDB3C7", "Chatelle"], 1032 | ["BDBBD7", "Lavender Gray"], 1033 | ["BDBDC6", "French Gray"], 1034 | ["BDC8B3", "Clay Ash"], 1035 | ["BDC9CE", "Loblolly"], 1036 | ["BDEDFD", "French Pass"], 1037 | ["BEA6C3", "London Hue"], 1038 | ["BEB5B7", "Pink Swan"], 1039 | ["BEDE0D", "Fuego"], 1040 | ["BF5500", "Rose of Sharon"], 1041 | ["BFB8B0", "Tide"], 1042 | ["BFBED8", "Blue Haze"], 1043 | ["BFC1C2", "Silver Sand"], 1044 | ["BFC921", "Key Lime Pie"], 1045 | ["BFDBE2", "Ziggurat"], 1046 | ["BFFF00", "Lime"], 1047 | ["C02B18", "Thunderbird"], 1048 | ["C04737", "Mojo"], 1049 | ["C08081", "Old Rose"], 1050 | ["C0C0C0", "Silver"], 1051 | ["C0D3B9", "Pale Leaf"], 1052 | ["C0D8B6", "Pixie Green"], 1053 | ["C1440E", "Tia Maria"], 1054 | ["C154C1", "Fuchsia Pink"], 1055 | ["C1A004", "Buddha Gold"], 1056 | ["C1B7A4", "Bison Hide"], 1057 | ["C1BAB0", "Tea"], 1058 | ["C1BECD", "Gray Suit"], 1059 | ["C1D7B0", "Sprout"], 1060 | ["C1F07C", "Sulu"], 1061 | ["C26B03", "Indochine"], 1062 | ["C2955D", "Twine"], 1063 | ["C2BDB6", "Cotton Seed"], 1064 | ["C2CAC4", "Pumice"], 1065 | ["C2E8E5", "Jagged Ice"], 1066 | ["C32148", "Maroon Flush"], 1067 | ["C3B091", "Indian Khaki"], 1068 | ["C3BFC1", "Pale Slate"], 1069 | ["C3C3BD", "Gray Nickel"], 1070 | ["C3CDE6", "Periwinkle Gray"], 1071 | ["C3D1D1", "Tiara"], 1072 | ["C3DDF9", "Tropical Blue"], 1073 | ["C41E3A", "Cardinal"], 1074 | ["C45655", "Fuzzy Wuzzy Brown"], 1075 | ["C45719", "Orange Roughy"], 1076 | ["C4C4BC", "Mist Gray"], 1077 | ["C4D0B0", "Coriander"], 1078 | ["C4F4EB", "Mint Tulip"], 1079 | ["C54B8C", "Mulberry"], 1080 | ["C59922", "Nugget"], 1081 | ["C5994B", "Tussock"], 1082 | ["C5DBCA", "Sea Mist"], 1083 | ["C5E17A", "Yellow Green"], 1084 | ["C62D42", "Brick Red"], 1085 | ["C6726B", "Contessa"], 1086 | ["C69191", "Oriental Pink"], 1087 | ["C6A84B", "Roti"], 1088 | ["C6C3B5", "Ash"], 1089 | ["C6C8BD", "Kangaroo"], 1090 | ["C6E610", "Las Palmas"], 1091 | ["C7031E", "Monza"], 1092 | ["C71585", "Red Violet"], 1093 | ["C7BCA2", "Coral Reef"], 1094 | ["C7C1FF", "Melrose"], 1095 | ["C7C4BF", "Cloud"], 1096 | ["C7C9D5", "Ghost"], 1097 | ["C7CD90", "Pine Glade"], 1098 | ["C7DDE5", "Botticelli"], 1099 | ["C88A65", "Antique Brass"], 1100 | ["C8A2C8", "Lilac"], 1101 | ["C8A528", "Hokey Pokey"], 1102 | ["C8AABF", "Lily"], 1103 | ["C8B568", "Laser"], 1104 | ["C8E3D7", "Edgewater"], 1105 | ["C96323", "Piper"], 1106 | ["C99415", "Pizza"], 1107 | ["C9A0DC", "Light Wisteria"], 1108 | ["C9B29B", "Rodeo Dust"], 1109 | ["C9B35B", "Sundance"], 1110 | ["C9B93B", "Earls Green"], 1111 | ["C9C0BB", "Silver Rust"], 1112 | ["C9D9D2", "Conch"], 1113 | ["C9FFA2", "Reef"], 1114 | ["C9FFE5", "Aero Blue"], 1115 | ["CA3435", "Flush Mahogany"], 1116 | ["CABB48", "Turmeric"], 1117 | ["CADCD4", "Paris White"], 1118 | ["CAE00D", "Bitter Lemon"], 1119 | ["CAE6DA", "Skeptic"], 1120 | ["CB8FA9", "Viola"], 1121 | ["CBCAB6", "Foggy Gray"], 1122 | ["CBD3B0", "Green Mist"], 1123 | ["CBDBD6", "Nebula"], 1124 | ["CC3333", "Persian Red"], 1125 | ["CC5500", "Burnt Orange"], 1126 | ["CC7722", "Ochre"], 1127 | ["CC8899", "Puce"], 1128 | ["CCCAA8", "Thistle Green"], 1129 | ["CCCCFF", "Periwinkle"], 1130 | ["CCFF00", "Electric Lime"], 1131 | ["CD5700", "Tenn"], 1132 | ["CD5C5C", "Chestnut Rose"], 1133 | ["CD8429", "Brandy Punch"], 1134 | ["CDF4FF", "Onahau"], 1135 | ["CEB98F", "Sorrell Brown"], 1136 | ["CEBABA", "Cold Turkey"], 1137 | ["CEC291", "Yuma"], 1138 | ["CEC7A7", "Chino"], 1139 | ["CFA39D", "Eunry"], 1140 | ["CFB53B", "Old Gold"], 1141 | ["CFDCCF", "Tasman"], 1142 | ["CFE5D2", "Surf Crest"], 1143 | ["CFF9F3", "Humming Bird"], 1144 | ["CFFAF4", "Scandal"], 1145 | ["D05F04", "Red Stage"], 1146 | ["D06DA1", "Hopbush"], 1147 | ["D07D12", "Meteor"], 1148 | ["D0BEF8", "Perfume"], 1149 | ["D0C0E5", "Prelude"], 1150 | ["D0F0C0", "Tea Green"], 1151 | ["D18F1B", "Geebung"], 1152 | ["D1BEA8", "Vanilla"], 1153 | ["D1C6B4", "Soft Amber"], 1154 | ["D1D2CA", "Celeste"], 1155 | ["D1D2DD", "Mischka"], 1156 | ["D1E231", "Pear"], 1157 | ["D2691E", "Hot Cinnamon"], 1158 | ["D27D46", "Raw Sienna"], 1159 | ["D29EAA", "Careys Pink"], 1160 | ["D2B48C", "Tan"], 1161 | ["D2DA97", "Deco"], 1162 | ["D2F6DE", "Blue Romance"], 1163 | ["D2F8B0", "Gossip"], 1164 | ["D3CBBA", "Sisal"], 1165 | ["D3CDC5", "Swirl"], 1166 | ["D47494", "Charm"], 1167 | ["D4B6AF", "Clam Shell"], 1168 | ["D4BF8D", "Straw"], 1169 | ["D4C4A8", "Akaroa"], 1170 | ["D4CD16", "Bird Flower"], 1171 | ["D4D7D9", "Iron"], 1172 | ["D4DFE2", "Geyser"], 1173 | ["D4E2FC", "Hawkes Blue"], 1174 | ["D54600", "Grenadier"], 1175 | ["D591A4", "Can Can"], 1176 | ["D59A6F", "Whiskey"], 1177 | ["D5D195", "Winter Hazel"], 1178 | ["D5F6E3", "Granny Apple"], 1179 | ["D69188", "My Pink"], 1180 | ["D6C562", "Tacha"], 1181 | ["D6CEF6", "Moon Raker"], 1182 | ["D6D6D1", "Quill Gray"], 1183 | ["D6FFDB", "Snowy Mint"], 1184 | ["D7837F", "New York Pink"], 1185 | ["D7C498", "Pavlova"], 1186 | ["D7D0FF", "Fog"], 1187 | ["D84437", "Valencia"], 1188 | ["D87C63", "Japonica"], 1189 | ["D8BFD8", "Thistle"], 1190 | ["D8C2D5", "Maverick"], 1191 | ["D8FCFA", "Foam"], 1192 | ["D94972", "Cabaret"], 1193 | ["D99376", "Burning Sand"], 1194 | ["D9B99B", "Cameo"], 1195 | ["D9D6CF", "Timberwolf"], 1196 | ["D9DCC1", "Tana"], 1197 | ["D9E4F5", "Link Water"], 1198 | ["D9F7FF", "Mabel"], 1199 | ["DA3287", "Cerise"], 1200 | ["DA5B38", "Flame Pea"], 1201 | ["DA6304", "Bamboo"], 1202 | ["DA6A41", "Red Damask"], 1203 | ["DA70D6", "Orchid"], 1204 | ["DA8A67", "Copperfield"], 1205 | ["DAA520", "Golden Grass"], 1206 | ["DAECD6", "Zanah"], 1207 | ["DAF4F0", "Iceberg"], 1208 | ["DAFAFF", "Oyster Bay"], 1209 | ["DB5079", "Cranberry"], 1210 | ["DB9690", "Petite Orchid"], 1211 | ["DB995E", "Di Serria"], 1212 | ["DBDBDB", "Alto"], 1213 | ["DBFFF8", "Frosted Mint"], 1214 | ["DC143C", "Crimson"], 1215 | ["DC4333", "Punch"], 1216 | ["DCB20C", "Galliano"], 1217 | ["DCB4BC", "Blossom"], 1218 | ["DCD747", "Wattle"], 1219 | ["DCD9D2", "Westar"], 1220 | ["DCDDCC", "Moon Mist"], 1221 | ["DCEDB4", "Caper"], 1222 | ["DCF0EA", "Swans Down"], 1223 | ["DDD6D5", "Swiss Coffee"], 1224 | ["DDF9F1", "White Ice"], 1225 | ["DE3163", "Cerise Red"], 1226 | ["DE6360", "Roman"], 1227 | ["DEA681", "Tumbleweed"], 1228 | ["DEBA13", "Gold Tips"], 1229 | ["DEC196", "Brandy"], 1230 | ["DECBC6", "Wafer"], 1231 | ["DED4A4", "Sapling"], 1232 | ["DED717", "Barberry"], 1233 | ["DEE5C0", "Beryl Green"], 1234 | ["DEF5FF", "Pattens Blue"], 1235 | ["DF73FF", "Heliotrope"], 1236 | ["DFBE6F", "Apache"], 1237 | ["DFCD6F", "Chenin"], 1238 | ["DFCFDB", "Lola"], 1239 | ["DFECDA", "Willow Brook"], 1240 | ["DFFF00", "Chartreuse Yellow"], 1241 | ["E0B0FF", "Mauve"], 1242 | ["E0B646", "Anzac"], 1243 | ["E0B974", "Harvest Gold"], 1244 | ["E0C095", "Calico"], 1245 | ["E0FFFF", "Baby Blue"], 1246 | ["E16865", "Sunglo"], 1247 | ["E1BC64", "Equator"], 1248 | ["E1C0C8", "Pink Flare"], 1249 | ["E1E6D6", "Periglacial Blue"], 1250 | ["E1EAD4", "Kidnapper"], 1251 | ["E1F6E8", "Tara"], 1252 | ["E25465", "Mandy"], 1253 | ["E2725B", "Terracotta"], 1254 | ["E28913", "Golden Bell"], 1255 | ["E292C0", "Shocking"], 1256 | ["E29418", "Dixie"], 1257 | ["E29CD2", "Light Orchid"], 1258 | ["E2D8ED", "Snuff"], 1259 | ["E2EBED", "Mystic"], 1260 | ["E2F3EC", "Apple Green"], 1261 | ["E30B5C", "Razzmatazz"], 1262 | ["E32636", "Alizarin Crimson"], 1263 | ["E34234", "Cinnabar"], 1264 | ["E3BEBE", "Cavern Pink"], 1265 | ["E3F5E1", "Peppermint"], 1266 | ["E3F988", "Mindaro"], 1267 | ["E47698", "Deep Blush"], 1268 | ["E49B0F", "Gamboge"], 1269 | ["E4C2D5", "Melanie"], 1270 | ["E4CFDE", "Twilight"], 1271 | ["E4D1C0", "Bone"], 1272 | ["E4D422", "Sunflower"], 1273 | ["E4D5B7", "Grain Brown"], 1274 | ["E4D69B", "Zombie"], 1275 | ["E4F6E7", "Frostee"], 1276 | ["E4FFD1", "Snow Flurry"], 1277 | ["E52B50", "Amaranth"], 1278 | ["E5841B", "Zest"], 1279 | ["E5CCC9", "Dust Storm"], 1280 | ["E5D7BD", "Stark White"], 1281 | ["E5D8AF", "Hampton"], 1282 | ["E5E0E1", "Bon Jour"], 1283 | ["E5E5E5", "Mercury"], 1284 | ["E5F9F6", "Polar"], 1285 | ["E64E03", "Trinidad"], 1286 | ["E6BE8A", "Gold Sand"], 1287 | ["E6BEA5", "Cashmere"], 1288 | ["E6D7B9", "Double Spanish White"], 1289 | ["E6E4D4", "Satin Linen"], 1290 | ["E6F2EA", "Harp"], 1291 | ["E6F8F3", "Off Green"], 1292 | ["E6FFE9", "Hint of Green"], 1293 | ["E6FFFF", "Tranquil"], 1294 | ["E77200", "Mango Tango"], 1295 | ["E7730A", "Christine"], 1296 | ["E79F8C", "Tonys Pink"], 1297 | ["E79FC4", "Kobi"], 1298 | ["E7BCB4", "Rose Fog"], 1299 | ["E7BF05", "Corn"], 1300 | ["E7CD8C", "Putty"], 1301 | ["E7ECE6", "Gray Nurse"], 1302 | ["E7F8FF", "Lily White"], 1303 | ["E7FEFF", "Bubbles"], 1304 | ["E89928", "Fire Bush"], 1305 | ["E8B9B3", "Shilo"], 1306 | ["E8E0D5", "Pearl Bush"], 1307 | ["E8EBE0", "Green White"], 1308 | ["E8F1D4", "Chrome White"], 1309 | ["E8F2EB", "Gin"], 1310 | ["E8F5F2", "Aqua Squeeze"], 1311 | ["E96E00", "Clementine"], 1312 | ["E97451", "Burnt Sienna"], 1313 | ["E97C07", "Tahiti Gold"], 1314 | ["E9CECD", "Oyster Pink"], 1315 | ["E9D75A", "Confetti"], 1316 | ["E9E3E3", "Ebb"], 1317 | ["E9F8ED", "Ottoman"], 1318 | ["E9FFFD", "Clear Day"], 1319 | ["EA88A8", "Carissma"], 1320 | ["EAAE69", "Porsche"], 1321 | ["EAB33B", "Tulip Tree"], 1322 | ["EAC674", "Rob Roy"], 1323 | ["EADAB8", "Raffia"], 1324 | ["EAE8D4", "White Rock"], 1325 | ["EAF6EE", "Panache"], 1326 | ["EAF6FF", "Solitude"], 1327 | ["EAF9F5", "Aqua Spring"], 1328 | ["EAFFFE", "Dew"], 1329 | ["EB9373", "Apricot"], 1330 | ["EBC2AF", "Zinnwaldite"], 1331 | ["ECA927", "Fuel Yellow"], 1332 | ["ECC54E", "Ronchi"], 1333 | ["ECC7EE", "French Lilac"], 1334 | ["ECCDB9", "Just Right"], 1335 | ["ECE090", "Wild Rice"], 1336 | ["ECEBBD", "Fall Green"], 1337 | ["ECEBCE", "Aths Special"], 1338 | ["ECF245", "Starship"], 1339 | ["ED0A3F", "Red Ribbon"], 1340 | ["ED7A1C", "Tango"], 1341 | ["ED9121", "Carrot Orange"], 1342 | ["ED989E", "Sea Pink"], 1343 | ["EDB381", "Tacao"], 1344 | ["EDC9AF", "Desert Sand"], 1345 | ["EDCDAB", "Pancho"], 1346 | ["EDDCB1", "Chamois"], 1347 | ["EDEA99", "Primrose"], 1348 | ["EDF5DD", "Frost"], 1349 | ["EDF5F5", "Aqua Haze"], 1350 | ["EDF6FF", "Zumthor"], 1351 | ["EDF9F1", "Narvik"], 1352 | ["EDFC84", "Honeysuckle"], 1353 | ["EE82EE", "Lavender Magenta"], 1354 | ["EEC1BE", "Beauty Bush"], 1355 | ["EED794", "Chalky"], 1356 | ["EED9C4", "Almond"], 1357 | ["EEDC82", "Flax"], 1358 | ["EEDEDA", "Bizarre"], 1359 | ["EEE3AD", "Double Colonial White"], 1360 | ["EEEEE8", "Cararra"], 1361 | ["EEEF78", "Manz"], 1362 | ["EEF0C8", "Tahuna Sands"], 1363 | ["EEF0F3", "Athens Gray"], 1364 | ["EEF3C3", "Tusk"], 1365 | ["EEF4DE", "Loafer"], 1366 | ["EEF6F7", "Catskill White"], 1367 | ["EEFDFF", "Twilight Blue"], 1368 | ["EEFF9A", "Jonquil"], 1369 | ["EEFFE2", "Rice Flower"], 1370 | ["EF863F", "Jaffa"], 1371 | ["EFEFEF", "Gallery"], 1372 | ["EFF2F3", "Porcelain"], 1373 | ["F091A9", "Mauvelous"], 1374 | ["F0D52D", "Golden Dream"], 1375 | ["F0DB7D", "Golden Sand"], 1376 | ["F0DC82", "Buff"], 1377 | ["F0E2EC", "Prim"], 1378 | ["F0E68C", "Khaki"], 1379 | ["F0EEFD", "Selago"], 1380 | ["F0EEFF", "Titan White"], 1381 | ["F0F8FF", "Alice Blue"], 1382 | ["F0FCEA", "Feta"], 1383 | ["F18200", "Gold Drop"], 1384 | ["F19BAB", "Wewak"], 1385 | ["F1E788", "Sahara Sand"], 1386 | ["F1E9D2", "Parchment"], 1387 | ["F1E9FF", "Blue Chalk"], 1388 | ["F1EEC1", "Mint Julep"], 1389 | ["F1F1F1", "Seashell"], 1390 | ["F1F7F2", "Saltpan"], 1391 | ["F1FFAD", "Tidal"], 1392 | ["F1FFC8", "Chiffon"], 1393 | ["F2552A", "Flamingo"], 1394 | ["F28500", "Tangerine"], 1395 | ["F2C3B2", "Mandys Pink"], 1396 | ["F2F2F2", "Concrete"], 1397 | ["F2FAFA", "Black Squeeze"], 1398 | ["F34723", "Pomegranate"], 1399 | ["F3AD16", "Buttercup"], 1400 | ["F3D69D", "New Orleans"], 1401 | ["F3D9DF", "Vanilla Ice"], 1402 | ["F3E7BB", "Sidecar"], 1403 | ["F3E9E5", "Dawn Pink"], 1404 | ["F3EDCF", "Wheatfield"], 1405 | ["F3FB62", "Canary"], 1406 | ["F3FBD4", "Orinoco"], 1407 | ["F3FFD8", "Carla"], 1408 | ["F400A1", "Hollywood Cerise"], 1409 | ["F4A460", "Sandy brown"], 1410 | ["F4C430", "Saffron"], 1411 | ["F4D81C", "Ripe Lemon"], 1412 | ["F4EBD3", "Janna"], 1413 | ["F4F2EE", "Pampas"], 1414 | ["F4F4F4", "Wild Sand"], 1415 | ["F4F8FF", "Zircon"], 1416 | ["F57584", "Froly"], 1417 | ["F5C85C", "Cream Can"], 1418 | ["F5C999", "Manhattan"], 1419 | ["F5D5A0", "Maize"], 1420 | ["F5DEB3", "Wheat"], 1421 | ["F5E7A2", "Sandwisp"], 1422 | ["F5E7E2", "Pot Pourri"], 1423 | ["F5E9D3", "Albescent White"], 1424 | ["F5EDEF", "Soft Peach"], 1425 | ["F5F3E5", "Ecru White"], 1426 | ["F5F5DC", "Beige"], 1427 | ["F5FB3D", "Golden Fizz"], 1428 | ["F5FFBE", "Australian Mint"], 1429 | ["F64A8A", "French Rose"], 1430 | ["F653A6", "Brilliant Rose"], 1431 | ["F6A4C9", "Illusion"], 1432 | ["F6F0E6", "Merino"], 1433 | ["F6F7F7", "Black Haze"], 1434 | ["F6FFDC", "Spring Sun"], 1435 | ["F7468A", "Violet Red"], 1436 | ["F77703", "Chilean Fire"], 1437 | ["F77FBE", "Persian Pink"], 1438 | ["F7B668", "Rajah"], 1439 | ["F7C8DA", "Azalea"], 1440 | ["F7DBE6", "We Peep"], 1441 | ["F7F2E1", "Quarter Spanish White"], 1442 | ["F7F5FA", "Whisper"], 1443 | ["F7FAF7", "Snow Drift"], 1444 | ["F8B853", "Casablanca"], 1445 | ["F8C3DF", "Chantilly"], 1446 | ["F8D9E9", "Cherub"], 1447 | ["F8DB9D", "Marzipan"], 1448 | ["F8DD5C", "Energy Yellow"], 1449 | ["F8E4BF", "Givry"], 1450 | ["F8F0E8", "White Linen"], 1451 | ["F8F4FF", "Magnolia"], 1452 | ["F8F6F1", "Spring Wood"], 1453 | ["F8F7DC", "Coconut Cream"], 1454 | ["F8F7FC", "White Lilac"], 1455 | ["F8F8F7", "Desert Storm"], 1456 | ["F8F99C", "Texas"], 1457 | ["F8FACD", "Corn Field"], 1458 | ["F8FDD3", "Mimosa"], 1459 | ["F95A61", "Carnation"], 1460 | ["F9BF58", "Saffron Mango"], 1461 | ["F9E0ED", "Carousel Pink"], 1462 | ["F9E4BC", "Dairy Cream"], 1463 | ["F9E663", "Portica"], 1464 | ["F9EAF3", "Amour"], 1465 | ["F9F8E4", "Rum Swizzle"], 1466 | ["F9FF8B", "Dolly"], 1467 | ["F9FFF6", "Sugar Cane"], 1468 | ["FA7814", "Ecstasy"], 1469 | ["FA9D5A", "Tan Hide"], 1470 | ["FAD3A2", "Corvette"], 1471 | ["FADFAD", "Peach Yellow"], 1472 | ["FAE600", "Turbo"], 1473 | ["FAEAB9", "Astra"], 1474 | ["FAECCC", "Champagne"], 1475 | ["FAF0E6", "Linen"], 1476 | ["FAF3F0", "Fantasy"], 1477 | ["FAF7D6", "Citrine White"], 1478 | ["FAFAFA", "Alabaster"], 1479 | ["FAFDE4", "Hint of Yellow"], 1480 | ["FAFFA4", "Milan"], 1481 | ["FB607F", "Brink Pink"], 1482 | ["FB8989", "Geraldine"], 1483 | ["FBA0E3", "Lavender Rose"], 1484 | ["FBA129", "Sea Buckthorn"], 1485 | ["FBAC13", "Sun"], 1486 | ["FBAED2", "Lavender Pink"], 1487 | ["FBB2A3", "Rose Bud"], 1488 | ["FBBEDA", "Cupid"], 1489 | ["FBCCE7", "Classic Rose"], 1490 | ["FBCEB1", "Apricot Peach"], 1491 | ["FBE7B2", "Banana Mania"], 1492 | ["FBE870", "Marigold Yellow"], 1493 | ["FBE96C", "Festival"], 1494 | ["FBEA8C", "Sweet Corn"], 1495 | ["FBEC5D", "Candy Corn"], 1496 | ["FBF9F9", "Hint of Red"], 1497 | ["FBFFBA", "Shalimar"], 1498 | ["FC0FC0", "Shocking Pink"], 1499 | ["FC80A5", "Tickle Me Pink"], 1500 | ["FC9C1D", "Tree Poppy"], 1501 | ["FCC01E", "Lightning Yellow"], 1502 | ["FCD667", "Goldenrod"], 1503 | ["FCD917", "Candlelight"], 1504 | ["FCDA98", "Cherokee"], 1505 | ["FCF4D0", "Double Pearl Lusta"], 1506 | ["FCF4DC", "Pearl Lusta"], 1507 | ["FCF8F7", "Vista White"], 1508 | ["FCFBF3", "Bianca"], 1509 | ["FCFEDA", "Moon Glow"], 1510 | ["FCFFE7", "China Ivory"], 1511 | ["FCFFF9", "Ceramic"], 1512 | ["FD0E35", "Torch Red"], 1513 | ["FD5B78", "Wild Watermelon"], 1514 | ["FD7B33", "Crusta"], 1515 | ["FD7C07", "Sorbus"], 1516 | ["FD9FA2", "Sweet Pink"], 1517 | ["FDD5B1", "Light Apricot"], 1518 | ["FDD7E4", "Pig Pink"], 1519 | ["FDE1DC", "Cinderella"], 1520 | ["FDE295", "Golden Glow"], 1521 | ["FDE910", "Lemon"], 1522 | ["FDF5E6", "Old Lace"], 1523 | ["FDF6D3", "Half Colonial White"], 1524 | ["FDF7AD", "Drover"], 1525 | ["FDFEB8", "Pale Prim"], 1526 | ["FDFFD5", "Cumulus"], 1527 | ["FE28A2", "Persian Rose"], 1528 | ["FE4C40", "Sunset Orange"], 1529 | ["FE6F5E", "Bittersweet"], 1530 | ["FE9D04", "California"], 1531 | ["FEA904", "Yellow Sea"], 1532 | ["FEBAAD", "Melon"], 1533 | ["FED33C", "Bright Sun"], 1534 | ["FED85D", "Dandelion"], 1535 | ["FEDB8D", "Salomie"], 1536 | ["FEE5AC", "Cape Honey"], 1537 | ["FEEBF3", "Remy"], 1538 | ["FEEFCE", "Oasis"], 1539 | ["FEF0EC", "Bridesmaid"], 1540 | ["FEF2C7", "Beeswax"], 1541 | ["FEF3D8", "Bleach White"], 1542 | ["FEF4CC", "Pipi"], 1543 | ["FEF4DB", "Half Spanish White"], 1544 | ["FEF4F8", "Wisp Pink"], 1545 | ["FEF5F1", "Provincial Pink"], 1546 | ["FEF7DE", "Half Dutch White"], 1547 | ["FEF8E2", "Solitaire"], 1548 | ["FEF8FF", "White Pointer"], 1549 | ["FEF9E3", "Off Yellow"], 1550 | ["FEFCED", "Orange White"], 1551 | ["FF0000", "Red"], 1552 | ["FF007F", "Rose"], 1553 | ["FF00CC", "Purple Pizzazz"], 1554 | ["FF00FF", "Magenta / Fuchsia"], 1555 | ["FF2400", "Scarlet"], 1556 | ["FF3399", "Wild Strawberry"], 1557 | ["FF33CC", "Razzle Dazzle Rose"], 1558 | ["FF355E", "Radical Red"], 1559 | ["FF3F34", "Red Orange"], 1560 | ["FF4040", "Coral Red"], 1561 | ["FF4D00", "Vermilion"], 1562 | ["FF4F00", "International Orange"], 1563 | ["FF6037", "Outrageous Orange"], 1564 | ["FF6600", "Blaze Orange"], 1565 | ["FF66FF", "Pink Flamingo"], 1566 | ["FF681F", "Orange"], 1567 | ["FF69B4", "Hot Pink"], 1568 | ["FF6B53", "Persimmon"], 1569 | ["FF6FFF", "Blush Pink"], 1570 | ["FF7034", "Burning Orange"], 1571 | ["FF7518", "Pumpkin"], 1572 | ["FF7D07", "Flamenco"], 1573 | ["FF7F00", "Flush Orange"], 1574 | ["FF7F50", "Coral"], 1575 | ["FF8C69", "Salmon"], 1576 | ["FF9000", "Pizazz"], 1577 | ["FF910F", "West Side"], 1578 | ["FF91A4", "Pink Salmon"], 1579 | ["FF9933", "Neon Carrot"], 1580 | ["FF9966", "Atomic Tangerine"], 1581 | ["FF9980", "Vivid Tangerine"], 1582 | ["FF9E2C", "Sunshade"], 1583 | ["FFA000", "Orange Peel"], 1584 | ["FFA194", "Mona Lisa"], 1585 | ["FFA500", "Web Orange"], 1586 | ["FFA6C9", "Carnation Pink"], 1587 | ["FFAB81", "Hit Pink"], 1588 | ["FFAE42", "Yellow Orange"], 1589 | ["FFB0AC", "Cornflower Lilac"], 1590 | ["FFB1B3", "Sundown"], 1591 | ["FFB31F", "My Sin"], 1592 | ["FFB555", "Texas Rose"], 1593 | ["FFB7D5", "Cotton Candy"], 1594 | ["FFB97B", "Macaroni and Cheese"], 1595 | ["FFBA00", "Selective Yellow"], 1596 | ["FFBD5F", "Koromiko"], 1597 | ["FFBF00", "Amber"], 1598 | ["FFC0A8", "Wax Flower"], 1599 | ["FFC0CB", "Pink"], 1600 | ["FFC3C0", "Your Pink"], 1601 | ["FFC901", "Supernova"], 1602 | ["FFCBA4", "Flesh"], 1603 | ["FFCC33", "Sunglow"], 1604 | ["FFCC5C", "Golden Tainoi"], 1605 | ["FFCC99", "Peach Orange"], 1606 | ["FFCD8C", "Chardonnay"], 1607 | ["FFD1DC", "Pastel Pink"], 1608 | ["FFD2B7", "Romantic"], 1609 | ["FFD38C", "Grandis"], 1610 | ["FFD700", "Gold"], 1611 | ["FFD800", "School bus Yellow"], 1612 | ["FFD8D9", "Cosmos"], 1613 | ["FFDB58", "Mustard"], 1614 | ["FFDCD6", "Peach Schnapps"], 1615 | ["FFDDAF", "Caramel"], 1616 | ["FFDDCD", "Tuft Bush"], 1617 | ["FFDDCF", "Watusi"], 1618 | ["FFDDF4", "Pink Lace"], 1619 | ["FFDEAD", "Navajo White"], 1620 | ["FFDEB3", "Frangipani"], 1621 | ["FFE1DF", "Pippin"], 1622 | ["FFE1F2", "Pale Rose"], 1623 | ["FFE2C5", "Negroni"], 1624 | ["FFE5A0", "Cream Brulee"], 1625 | ["FFE5B4", "Peach"], 1626 | ["FFE6C7", "Tequila"], 1627 | ["FFE772", "Kournikova"], 1628 | ["FFEAC8", "Sandy Beach"], 1629 | ["FFEAD4", "Karry"], 1630 | ["FFEC13", "Broom"], 1631 | ["FFEDBC", "Colonial White"], 1632 | ["FFEED8", "Derby"], 1633 | ["FFEFA1", "Vis Vis"], 1634 | ["FFEFC1", "Egg White"], 1635 | ["FFEFD5", "Papaya Whip"], 1636 | ["FFEFEC", "Fair Pink"], 1637 | ["FFF0DB", "Peach Cream"], 1638 | ["FFF0F5", "Lavender blush"], 1639 | ["FFF14F", "Gorse"], 1640 | ["FFF1B5", "Buttermilk"], 1641 | ["FFF1D8", "Pink Lady"], 1642 | ["FFF1EE", "Forget Me Not"], 1643 | ["FFF1F9", "Tutu"], 1644 | ["FFF39D", "Picasso"], 1645 | ["FFF3F1", "Chardon"], 1646 | ["FFF46E", "Paris Daisy"], 1647 | ["FFF4CE", "Barley White"], 1648 | ["FFF4DD", "Egg Sour"], 1649 | ["FFF4E0", "Sazerac"], 1650 | ["FFF4E8", "Serenade"], 1651 | ["FFF4F3", "Chablis"], 1652 | ["FFF5EE", "Seashell Peach"], 1653 | ["FFF5F3", "Sauvignon"], 1654 | ["FFF6D4", "Milk Punch"], 1655 | ["FFF6DF", "Varden"], 1656 | ["FFF6F5", "Rose White"], 1657 | ["FFF8D1", "Baja White"], 1658 | ["FFF9E2", "Gin Fizz"], 1659 | ["FFF9E6", "Early Dawn"], 1660 | ["FFFACD", "Lemon Chiffon"], 1661 | ["FFFAF4", "Bridal Heath"], 1662 | ["FFFBDC", "Scotch Mist"], 1663 | ["FFFBF9", "Soapstone"], 1664 | ["FFFC99", "Witch Haze"], 1665 | ["FFFCEA", "Buttery White"], 1666 | ["FFFCEE", "Island Spice"], 1667 | ["FFFDD0", "Cream"], 1668 | ["FFFDE6", "Chilean Heath"], 1669 | ["FFFDE8", "Travertine"], 1670 | ["FFFDF3", "Orchid White"], 1671 | ["FFFDF4", "Quarter Pearl Lusta"], 1672 | ["FFFEE1", "Half and Half"], 1673 | ["FFFEEC", "Apricot White"], 1674 | ["FFFEF0", "Rice Cake"], 1675 | ["FFFEF6", "Black White"], 1676 | ["FFFEFD", "Romance"], 1677 | ["FFFF00", "Yellow"], 1678 | ["FFFF66", "Laser Lemon"], 1679 | ["FFFF99", "Pale Canary"], 1680 | ["FFFFB4", "Portafino"], 1681 | ["FFFFF0", "Ivory"], 1682 | ["FFFFFF", "White"] 1683 | ] 1684 | 1685 | } 1686 | 1687 | ntc.init(); 1688 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /src/registerServiceWorker.js: -------------------------------------------------------------------------------- 1 | // In production, we register a service worker to serve assets from local cache. 2 | 3 | // This lets the app load faster on subsequent visits in production, and gives 4 | // it offline capabilities. However, it also means that developers (and users) 5 | // will only see deployed updates on the "N+1" visit to a page, since previously 6 | // cached resources are updated in the background. 7 | 8 | // To learn more about the benefits of this model, read https://goo.gl/KwvDNy. 9 | // This link also includes instructions on opting out of this behavior. 10 | 11 | const isLocalhost = Boolean( 12 | window.location.hostname === 'localhost' || 13 | // [::1] is the IPv6 localhost address. 14 | window.location.hostname === '[::1]' || 15 | // 127.0.0.1/8 is considered localhost for IPv4. 16 | window.location.hostname.match( 17 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ 18 | ) 19 | ); 20 | 21 | export default function register() { 22 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 23 | // The URL constructor is available in all browsers that support SW. 24 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location); 25 | if (publicUrl.origin !== window.location.origin) { 26 | // Our service worker won't work if PUBLIC_URL is on a different origin 27 | // from what our page is served on. This might happen if a CDN is used to 28 | // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374 29 | return; 30 | } 31 | 32 | window.addEventListener('load', () => { 33 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 34 | 35 | if (isLocalhost) { 36 | // This is running on localhost. Lets check if a service worker still exists or not. 37 | checkValidServiceWorker(swUrl); 38 | 39 | // Add some additional logging to localhost, pointing developers to the 40 | // service worker/PWA documentation. 41 | navigator.serviceWorker.ready.then(() => { 42 | console.log( 43 | 'This web app is being served cache-first by a service ' + 44 | 'worker. To learn more, visit https://goo.gl/SC7cgQ' 45 | ); 46 | }); 47 | } else { 48 | // Is not local host. Just register service worker 49 | registerValidSW(swUrl); 50 | } 51 | }); 52 | } 53 | } 54 | 55 | function registerValidSW(swUrl) { 56 | navigator.serviceWorker 57 | .register(swUrl) 58 | .then(registration => { 59 | registration.onupdatefound = () => { 60 | const installingWorker = registration.installing; 61 | installingWorker.onstatechange = () => { 62 | if (installingWorker.state === 'installed') { 63 | if (navigator.serviceWorker.controller) { 64 | // At this point, the old content will have been purged and 65 | // the fresh content will have been added to the cache. 66 | // It's the perfect time to display a "New content is 67 | // available; please refresh." message in your web app. 68 | console.log('New content is available; please refresh.'); 69 | } else { 70 | // At this point, everything has been precached. 71 | // It's the perfect time to display a 72 | // "Content is cached for offline use." message. 73 | console.log('Content is cached for offline use.'); 74 | } 75 | } 76 | }; 77 | }; 78 | }) 79 | .catch(error => { 80 | console.error('Error during service worker registration:', error); 81 | }); 82 | } 83 | 84 | function checkValidServiceWorker(swUrl) { 85 | // Check if the service worker can be found. If it can't reload the page. 86 | fetch(swUrl) 87 | .then(response => { 88 | // Ensure service worker exists, and that we really are getting a JS file. 89 | if ( 90 | response.status === 404 || 91 | response.headers.get('content-type').indexOf('javascript') === -1 92 | ) { 93 | // No service worker found. Probably a different app. Reload the page. 94 | navigator.serviceWorker.ready.then(registration => { 95 | registration.unregister().then(() => { 96 | window.location.reload(); 97 | }); 98 | }); 99 | } else { 100 | // Service worker found. Proceed as normal. 101 | registerValidSW(swUrl); 102 | } 103 | }) 104 | .catch(() => { 105 | console.log( 106 | 'No internet connection found. App is running in offline mode.' 107 | ); 108 | }); 109 | } 110 | 111 | export function unregister() { 112 | if ('serviceWorker' in navigator) { 113 | navigator.serviceWorker.ready.then(registration => { 114 | registration.unregister(); 115 | }); 116 | } 117 | } 118 | -------------------------------------------------------------------------------- /src/stories/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import { storiesOf } from '@storybook/react'; 4 | import { muiTheme } from 'storybook-addon-material-ui'; 5 | import theme from '../ui/theme'; 6 | 7 | import Title from '../ui/Title'; 8 | import ThemesList from '../ui/ThemesList'; 9 | import ThemeAva from '../ui/ThemeAva'; 10 | // import Editor from '../ui/Editor'; 11 | import { themeCode, themeJson } from '../theme-api'; 12 | 13 | const palette = { 14 | tonalOffset: 0.2, 15 | background: { paper: '#fff', default: '#fafafa' }, 16 | contrastThreshold: 3, 17 | grey: { 18 | '50': '#fafafa', 19 | '100': '#f5f5f5', 20 | '200': '#eeeeee', 21 | '300': '#e0e0e0', 22 | '400': '#bdbdbd', 23 | '500': '#9e9e9e', 24 | '600': '#757575', 25 | '700': '#616161', 26 | '800': '#424242', 27 | '900': '#212121', 28 | A700: '#616161', 29 | A100: '#d5d5d5', 30 | A400: '#303030', 31 | A200: '#aaaaaa', 32 | }, 33 | text: { 34 | primary: '#212121', 35 | secondary: '#ECEFF1', 36 | disabled: 'rgba(0, 0, 0, 0.38)', 37 | hint: 'rgba(0, 0, 0, 0.38)', 38 | }, 39 | divider: 'rgba(0, 0, 0, 0.12)', 40 | secondary: { 41 | main: '#7B1FA2', 42 | light: 'rgb(149, 75, 180)', 43 | dark: 'rgb(86, 21, 113)', 44 | contrastText: '#fff', 45 | }, 46 | common: { black: '#000', white: '#fff' }, 47 | error: { 48 | light: '#e57373', 49 | main: '#f44336', 50 | dark: '#d32f2f', 51 | contrastText: '#fff', 52 | }, 53 | type: 'light', 54 | action: { 55 | hoverOpacity: 0.08, 56 | hover: 'rgba(0, 0, 0, 0.08)', 57 | selected: 'rgba(0, 0, 0, 0.14)', 58 | disabledBackground: 'rgba(0, 0, 0, 0.12)', 59 | disabled: 'rgba(0, 0, 0, 0.26)', 60 | active: 'rgba(0, 0, 0, 0.54)', 61 | }, 62 | primary: { 63 | main: '#42A5F5', 64 | light: 'rgb(103, 183, 247)', 65 | dark: 'rgb(46, 115, 171)', 66 | contrastText: 'rgba(0, 0, 0, 0.87)', 67 | }, 68 | }; 69 | 70 | storiesOf('Button', module) 71 | .addDecorator(muiTheme(theme)) 72 | .add('Title', () => <Title />) 73 | .add('ThemesList', () => ( 74 | <ThemesList 75 | themesList={[ 76 | { 77 | name: 'Theme 1', 78 | query: '123', 79 | }, 80 | ]} 81 | /> 82 | )) 83 | .add('ThemeAva', () => ( 84 | <div style={{display: 'flex'}}> 85 | <div style={{ width: 200, height: 200, margin: 28, }}> 86 | <ThemeAva palette={palette}/> 87 | </div> 88 | <div style={{ width: 100, height: 100, margin: 28, }}> 89 | <ThemeAva palette={palette} /> 90 | </div> 91 | <div style={{ width: 50, height: 50, margin: 28, }}> 92 | <ThemeAva palette={palette} /> 93 | </div> 94 | <div style={{ width: 28, height: 28, margin: 28, }}> 95 | <ThemeAva palette={palette} /> 96 | </div> 97 | </div> 98 | )); 99 | -------------------------------------------------------------------------------- /src/theme-api.js: -------------------------------------------------------------------------------- 1 | import Chance from 'chance'; 2 | import { ntc } from './libs/ntc'; 3 | const prettier = require("prettier/standalone"); 4 | const plugins = [require("prettier/parser-babylon")]; 5 | 6 | const chance = new Chance(); 7 | 8 | export const themeName = palette => { 9 | const primaryName = ntc.name(palette.primary.main)[1]; 10 | const secondaryName = ntc.name(palette.secondary.main)[1]; 11 | return `${primaryName} ${secondaryName} ${chance.animal()}`; 12 | }; 13 | 14 | export const themeCode = overrides => { 15 | if (!overrides) return ''; 16 | const keys = Object.keys(overrides); 17 | 18 | const code = ` 19 | // src/ui/theme/index.js 20 | 21 | import { createMuiTheme } from '@material-ui/core/styles'; 22 | 23 | ${keys.map(key => ` 24 | const ${key} = ${JSON.stringify(overrides[key])} 25 | 26 | `).join('\n\n;')} 27 | 28 | export default createMuiTheme({ ${keys.map(key => key)} }); 29 | 30 | `; 31 | 32 | return prettier.format(code, {parser: "babylon", plugins, singleQuote: true}); 33 | }; 34 | 35 | export const themeJson = theme => { 36 | if (!theme) return ''; 37 | const code = `/* src/ui/theme/theme.json */ 38 | 39 | ${JSON.stringify(theme)}`; 40 | return prettier.format(code, {parser: "json", plugins}); 41 | } 42 | -------------------------------------------------------------------------------- /src/ui/DropDialog.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/no-multi-comp */ 2 | 3 | import React from 'react'; 4 | import PropTypes from 'prop-types'; 5 | import { withStyles } from '@material-ui/core/styles'; 6 | import DialogTitle from '@material-ui/core/DialogTitle'; 7 | import Dialog from '@material-ui/core/Dialog'; 8 | import CardMedia from '@material-ui/core/CardMedia'; 9 | 10 | const styles = { 11 | root: { 12 | width: 800, 13 | }, 14 | title: { 15 | textAlign: 'center', 16 | }, 17 | media: { 18 | height: 400, 19 | }, 20 | mediaOver: { 21 | height: 400, 22 | opacity: 0.6, 23 | }, 24 | }; 25 | 26 | class SimpleDialog extends React.PureComponent { 27 | state = { 28 | dragover: false, 29 | }; 30 | static getDerivedStateFromProps(props, state) { 31 | if (!props.open) { 32 | return { dragover: false }; 33 | } 34 | return null; 35 | } 36 | handleClose = () => { 37 | this.setState({ dragover: false }); 38 | // this.props.onClose(this.props.selectedValue); 39 | }; 40 | 41 | handleDragOver = ev => { 42 | this.setState({ dragover: true }); 43 | }; 44 | 45 | render() { 46 | const { classes, onClose, selectedValue, ...other } = this.props; 47 | return ( 48 | <Dialog 49 | onClose={this.handleClose} 50 | aria-labelledby="simple-dialog-title" 51 | fullWidth 52 | {...other} 53 | > 54 | <DialogTitle id="simple-dialog-title" classes={{ root: classes.title }}> 55 | Just drop url anywhere to create a new theme 56 | </DialogTitle> 57 | <div 58 | onDragOver={this.handleDragOver} 59 | onDragLeave={() => this.setState({ dragover: false })} 60 | > 61 | <CardMedia 62 | className={this.state.dragover ? classes.mediaOver : classes.media} 63 | image="https://images.unsplash.com/photo-1532244619359-b8baaca8581e?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=8d7c2832766bfd114098faeadf780d41&auto=format&fit=crop&w=1826&q=80" 64 | title="Drop zone" 65 | /> 66 | </div> 67 | </Dialog> 68 | ); 69 | } 70 | } 71 | 72 | SimpleDialog.propTypes = { 73 | classes: PropTypes.object.isRequired, 74 | onClose: PropTypes.func, 75 | selectedValue: PropTypes.string, 76 | }; 77 | 78 | export default withStyles(styles)(SimpleDialog); 79 | 80 | -------------------------------------------------------------------------------- /src/ui/Editor/Editor.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Editor from 'react-simple-code-editor'; 3 | import { highlight, languages } from 'prismjs/components/prism-core'; 4 | import 'prismjs/components/prism-clike'; 5 | import 'prismjs/components/prism-javascript'; 6 | 7 | const code = `function add(a, b) { 8 | return a + b; 9 | } 10 | `; 11 | 12 | export default class App extends React.Component { 13 | static defaultProps = { 14 | code: '' 15 | } 16 | state = { code }; 17 | 18 | render() { 19 | return ( 20 | <Editor 21 | value={this.props.code} 22 | // onValueChange={code => this.setState({ code })} 23 | onValueChange={() => {}} 24 | highlight={code => highlight(code, languages.js)} 25 | // padding={10} 26 | className={this.props.className} 27 | style={{ 28 | fontFamily: '"Fira code", "Fira Mono", monospace', 29 | fontSize: 12, 30 | }} 31 | /> 32 | ); 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /src/ui/Editor/Layout.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { withStyles } from '@material-ui/core/styles'; 3 | import Editor from './Editor'; 4 | 5 | export default withStyles({ 6 | root: { 7 | display: 'flex', 8 | alignItems: 'stretch', 9 | height: '100%', 10 | }, 11 | divider: { 12 | width: 100, 13 | }, 14 | editor: { 15 | flexGrow: 1, 16 | height: '100%', 17 | overflowY: 'auto', 18 | overflowX: 'hidden', 19 | // maxHeight: 250, 20 | width: 100, 21 | margin: 10, 22 | }, 23 | })(({ code, json, classes }) => ( 24 | <div className={classes.root}> 25 | <div className={classes.editor}> 26 | <Editor code={code} /> 27 | </div> 28 | <div className={classes.divider} /> 29 | <div className={classes.editor}> 30 | <Editor code={json} /> 31 | </div> 32 | </div> 33 | )); 34 | -------------------------------------------------------------------------------- /src/ui/Editor/index.js: -------------------------------------------------------------------------------- 1 | import Editor from './Layout'; 2 | 3 | export default Editor; 4 | -------------------------------------------------------------------------------- /src/ui/HelpDialog.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/no-multi-comp */ 2 | 3 | import React from 'react'; 4 | import PropTypes from 'prop-types'; 5 | import { withStyles } from '@material-ui/core/styles'; 6 | import Button from '@material-ui/core/Button'; 7 | import DialogTitle from '@material-ui/core/DialogTitle'; 8 | import Dialog from '@material-ui/core/Dialog'; 9 | import CardMedia from '@material-ui/core/CardMedia'; 10 | import CardContent from '@material-ui/core/CardContent'; 11 | import CardActions from '@material-ui/core/CardActions'; 12 | import Typography from '@material-ui/core/Typography'; 13 | 14 | const styles = { 15 | root: { 16 | // width: 800, 17 | // maxWidth: 1200, 18 | outline: 'none', 19 | overflow: 'hidden', 20 | // borderRadius: 2, 21 | '& a': { 22 | color: '#2358fb', 23 | textDecoration: 'none', 24 | }, 25 | '& a:visited': { 26 | color: '#3b539a', 27 | }, 28 | }, 29 | title: { 30 | textAlign: 'center', 31 | }, 32 | media: { 33 | height: 90, 34 | }, 35 | mediaOver: { 36 | height: 400, 37 | opacity: 0.6, 38 | }, 39 | p: { 40 | '&>a': { 41 | color: 'red', 42 | }, 43 | }, 44 | footer: { 45 | display: 'flex', 46 | justifyContent: 'space-around', 47 | padding: 16, 48 | }, 49 | }; 50 | 51 | class SimpleDialog extends React.PureComponent { 52 | state = { 53 | dragover: false, 54 | }; 55 | static getDerivedStateFromProps(props, state) { 56 | if (!props.open) { 57 | return { dragover: false }; 58 | } 59 | return null; 60 | } 61 | handleClose = () => { 62 | this.setState({ dragover: false }); 63 | this.props.onClose(this.props.selectedValue); 64 | }; 65 | 66 | handleDragOver = ev => { 67 | this.setState({ dragover: true }); 68 | }; 69 | 70 | render() { 71 | const { classes, onClose, selectedValue, ...other } = this.props; 72 | return ( 73 | <Dialog 74 | onClose={this.handleClose} 75 | PaperProps={{ 76 | className: classes.root, 77 | }} 78 | aria-labelledby="simple-dialog-title" 79 | fullWidth 80 | {...other} 81 | > 82 | <CardMedia 83 | className={classes.media} 84 | image="https://images.unsplash.com/photo-1532244619359-b8baaca8581e?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=8d7c2832766bfd114098faeadf780d41&auto=format&fit=crop&w=1826&q=80" 85 | title="Drop zone" 86 | /> 87 | <DialogTitle id="simple-dialog-title" classes={{ root: classes.title }}> 88 | Create Material-UI Theme 89 | </DialogTitle> 90 | <CardContent> 91 | <Typography component="p" paragraph> 92 | 1. Open{' '} 93 | <a href="https://material.io/tools/color" target="_blank" rel="noopener noreferrer"> 94 | https://material.io/tools/color 95 | </a>{' '} 96 | and create a new material-ui theme. 97 | </Typography> 98 | <Typography component="p"> 99 | 2. Copy & Paste URL from browser address bar into the left panel on this page and press the "ADD" button. 100 | </Typography> 101 | <Typography component="p" paragraph> 102 | (or you can simply drag URL by your mouse from material.io and drop it here in any place) 103 | </Typography> 104 | <Typography component="p" paragraph> 105 | 3. You can repeat it as much as you need. All themes will be listed on the left panel. You can select any to inspect. 106 | </Typography> 107 | <Typography component="p" paragraph> 108 | 4. As you select a theme you'll find a code that you can copy-paste in your project and use this theme. There are JS and JSON variants for your choice. 109 | </Typography> 110 | 111 | <DialogTitle 112 | id="simple-dialog-title" 113 | classes={{ root: classes.title }} 114 | > 115 | What's next? 116 | </DialogTitle> 117 | <Typography component="p" paragraph> 118 | 1. Learn about theming in{' '} 119 | <a 120 | href="https://material-ui.com/customization/themes/" 121 | target="_blanc" 122 | > 123 | Material-UI 124 | </a>{' '} 125 | documentation 126 | </Typography> 127 | <Typography component="p" paragraph> 128 | 2. Add to your DX such tools as{' '} 129 | <a href="https://storybook.js.org/">Storybook</a> and{' '} 130 | <a href="https://github.com/react-theming/storybook-addon-material-ui"> 131 | Storybook Addon Material-UI 132 | </a> 133 | </Typography> 134 | <Typography component="p" paragraph> 135 | 3. Test how these tools go together starting a new project from scratch with{' '} 136 | <a href="https://github.com/react-theming/create-material-ui-app"> 137 | create-material-ui-app 138 | </a>{' '} 139 | boilerplate 140 | </Typography> 141 | 142 | <DialogTitle 143 | id="simple-dialog-title" 144 | classes={{ root: classes.title }} 145 | > 146 | Credits 147 | </DialogTitle> 148 | <Typography component="p" paragraph> 149 | This tool is created for you by{' '} 150 | <a href="https://github.com/react-theming" target="_blanc"> 151 | React-Theming 152 | </a>{' '} 153 | as an addition for{' '} 154 | <a 155 | href="https://github.com/react-theming/storybook-addon-material-ui" 156 | target="_blanc" 157 | > 158 | Storybook Addon Material-UI 159 | </a> 160 | </Typography> 161 | <Typography component="p" paragraph> 162 | This is an{' '} 163 | <a 164 | href="https://github.com/react-theming/create-mui-theme" 165 | target="_blanc" 166 | > 167 | Open Source 168 | </a>{' '} 169 | project under the MIT License 170 | </Typography> 171 | {/* <Typography> 172 | Author: 173 | <Typography component="p" paragraph> 174 | <a href="https://t.me/usulpro" target="_blanc"> 175 | @usulpro 176 | </a>{' '} 177 | (telegram) 178 | </Typography> 179 | <Typography component="p" paragraph> 180 | <a href="https://github.com/UsulPro"> 181 | <img 182 | src="https://camo.githubusercontent.com/5e97cb3d4cb089e0109a243a505cfebc3f75a9ba/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6769746875622d5573756c50726f2d626c75652e737667" 183 | alt="@UsulPro" 184 | data-canonical-src="https://img.shields.io/badge/github-UsulPro-blue.svg" 185 | /> 186 | </a> 187 | </Typography> 188 | </Typography> */} 189 | </CardContent> 190 | <CardActions className={classes.footer}> 191 | <Button 192 | href="https://github.com/react-theming/storybook-addon-material-ui" 193 | target="_blanc" 194 | size="small" 195 | color="primary" 196 | > 197 | Storybook Addon Material-UI 198 | </Button> 199 | <Button 200 | href="https://material.io/tools/color" 201 | target="_blanc" 202 | size="small" 203 | color="primary" 204 | > 205 | Color Tool 206 | </Button> 207 | <Button 208 | href="https://github.com/react-theming/create-mui-theme" 209 | target="_blanc" 210 | size="small" 211 | color="primary" 212 | > 213 | Create MUI Theme 214 | </Button> 215 | <a href="https://github.com/UsulPro"> 216 | <img 217 | src="https://camo.githubusercontent.com/5e97cb3d4cb089e0109a243a505cfebc3f75a9ba/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6769746875622d5573756c50726f2d626c75652e737667" 218 | alt="@UsulPro" 219 | data-canonical-src="https://img.shields.io/badge/github-UsulPro-blue.svg" 220 | /> 221 | </a> 222 | </CardActions> 223 | </Dialog> 224 | ); 225 | } 226 | } 227 | 228 | SimpleDialog.propTypes = { 229 | classes: PropTypes.object.isRequired, 230 | onClose: PropTypes.func, 231 | selectedValue: PropTypes.string, 232 | }; 233 | 234 | export default withStyles(styles)(SimpleDialog); 235 | -------------------------------------------------------------------------------- /src/ui/Inspector/Inspector.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { withStyles } from '@material-ui/core/styles'; 3 | import { ObjectInspector } from 'react-inspector'; 4 | import CardHeader from '@material-ui/core/CardHeader'; 5 | import PaletteTable from './PaletteTable'; 6 | import ThemeAva from '../ThemeAva'; 7 | 8 | export default withStyles({ 9 | root: { 10 | display: 'flex', 11 | alignItems: 'stretch', 12 | height: '100%', 13 | }, 14 | ava: { 15 | width: 160, 16 | height: 160, 17 | padding: 16, 18 | }, 19 | inspect: { 20 | width: 160, 21 | flexGrow: 1, 22 | flexShrink: 1, 23 | padding: 16, 24 | overflowY: 'auto', 25 | }, 26 | divider: { 27 | margin: '16px 0px' 28 | }, 29 | link: { 30 | color: '#0051abbd' 31 | }, 32 | })(({ classes, selectedTheme }) => ( 33 | <div className={classes.root}> 34 | <div className={classes.ava}> 35 | <ThemeAva theme={selectedTheme && selectedTheme.theme} /> 36 | {/* <Divider className={classes.divider}/> */} 37 | <PaletteTable theme={selectedTheme && selectedTheme.theme} /> 38 | </div> 39 | <div className={classes.inspect}> 40 | <CardHeader title={(selectedTheme && selectedTheme.name) || 'Drop the theme URL here...'} 41 | subheader={!selectedTheme && <span>try <a className={classes.link} href="https://material.io/tools/color/#!/?view.left=0&view.right=0&secondary.color=EF5350&primary.color=FB8C00&primary.text.color=3E2723&secondary.text.color=FAFAFA" target="_blank" rel="noopener noreferrer">this</a> for example.</span>}/> 42 | {selectedTheme && <ObjectInspector data={selectedTheme && selectedTheme.theme} expandLevel={1} />} 43 | </div> 44 | </div> 45 | )); 46 | -------------------------------------------------------------------------------- /src/ui/Inspector/PaletteTable.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { withStyles } from '@material-ui/core/styles'; 3 | 4 | import Table from '@material-ui/core/Table'; 5 | import TableBody from '@material-ui/core/TableBody'; 6 | import TableCell from '@material-ui/core/TableCell'; 7 | import TableHead from '@material-ui/core/TableHead'; 8 | import TableRow from '@material-ui/core/TableRow'; 9 | import Tooltip from '@material-ui/core/Tooltip'; 10 | import Zoom from '@material-ui/core/Zoom'; 11 | 12 | const dispColors = obj => { 13 | const keys = Object.keys(obj); 14 | return keys.map(key => ({ name: key, val: obj[key] })); 15 | }; 16 | 17 | export default withStyles({ 18 | root: { 19 | marginTop: 16, 20 | }, 21 | cell: { 22 | height: 16, 23 | }, 24 | row: { 25 | height: 16, 26 | }, 27 | head: { 28 | height: 24, 29 | }, 30 | pic: { 31 | height: 10, 32 | width: 10, 33 | border: '1px solid #989898', 34 | }, 35 | })(({ classes, theme }) => { 36 | if (!theme) return null; 37 | const palette = theme.palette; 38 | if (!palette) return null; 39 | const { primary, secondary } = palette; 40 | 41 | return ( 42 | <React.Fragment> 43 | <Table className={classes.root}> 44 | <TableHead> 45 | <TableRow className={classes.head}> 46 | <TableCell>Primary</TableCell> 47 | <TableCell numeric /> 48 | </TableRow> 49 | </TableHead> 50 | <TableBody> 51 | {dispColors(primary).map(color => { 52 | return ( 53 | <Tooltip 54 | TransitionComponent={Zoom} 55 | TransitionProps={{ timeout: 600 }} 56 | title={color.val} 57 | placement="right" 58 | > 59 | <TableRow 60 | className={classes.row} 61 | key={color.name} 62 | > 63 | <TableCell className={classes.cell}>{color.name}</TableCell> 64 | <TableCell className={classes.cell}> 65 | <div 66 | className={classes.pic} 67 | style={{ backgroundColor: color.val }} 68 | /> 69 | </TableCell> 70 | </TableRow> 71 | </Tooltip> 72 | ); 73 | })} 74 | </TableBody> 75 | </Table> 76 | <Table className={classes.table}> 77 | <TableHead> 78 | <TableRow className={classes.head}> 79 | <TableCell>Secondary</TableCell> 80 | <TableCell numeric /> 81 | </TableRow> 82 | </TableHead> 83 | <TableBody> 84 | {dispColors(secondary).map(color => { 85 | return ( 86 | <Tooltip 87 | TransitionComponent={Zoom} 88 | TransitionProps={{ timeout: 600 }} 89 | title={color.val} 90 | placement="right" 91 | > 92 | <TableRow 93 | className={classes.row} 94 | key={color.name} 95 | > 96 | <TableCell className={classes.cell}>{color.name}</TableCell> 97 | <TableCell className={classes.cell}> 98 | <div 99 | className={classes.pic} 100 | style={{ backgroundColor: color.val }} 101 | /> 102 | </TableCell> 103 | </TableRow> 104 | </Tooltip> 105 | ); 106 | })} 107 | </TableBody> 108 | </Table> 109 | </React.Fragment> 110 | ); 111 | }); 112 | -------------------------------------------------------------------------------- /src/ui/Inspector/index.js: -------------------------------------------------------------------------------- 1 | import Inspector from './Inspector' 2 | 3 | export default Inspector; 4 | -------------------------------------------------------------------------------- /src/ui/ThemeAva.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { withStyles } from '@material-ui/core/styles'; 3 | import Paper from '@material-ui/core/Paper'; 4 | 5 | class ThemeAva extends React.Component { 6 | static defaultProps = { 7 | // Holder: div 8 | } 9 | 10 | renderRow = (colors, rowInd) => { 11 | const { classes } = this.props; 12 | return ( 13 | <div key={rowInd} className={classes.row}> 14 | {colors.map((col, ind) => ( 15 | <div key={ind} className={classes.pixel} style={{ backgroundColor: col }} /> 16 | ))} 17 | </div> 18 | ); 19 | }; 20 | 21 | renderMatrix = matrix => ( 22 | <Paper className={this.props.classes.root}> 23 | {matrix.map((row, ind) => this.renderRow(row, ind))} 24 | </Paper> 25 | ); 26 | 27 | renderNull = () => { 28 | const matrix = new Array(4).fill(new Array(4).fill('rgba(197, 196, 196, 0.74)')); 29 | return this.renderMatrix(matrix); 30 | }; 31 | 32 | render() { 33 | const { theme } = this.props; 34 | if (!theme) return this.renderNull(); 35 | const { palette } = theme; 36 | if (!palette) return this.renderNull(); 37 | const matrix = [ 38 | [ 39 | palette.primary.light, 40 | palette.primary.light, 41 | palette.primary.contrastText, 42 | palette.primary.dark, 43 | ], 44 | [ 45 | palette.primary.light, 46 | palette.primary.main, 47 | palette.primary.main, 48 | palette.primary.dark, 49 | ], 50 | [ 51 | palette.secondary.dark, 52 | palette.secondary.main, 53 | palette.secondary.main, 54 | palette.secondary.light, 55 | ], 56 | [ 57 | palette.secondary.dark, 58 | palette.secondary.contrastText, 59 | palette.secondary.light, 60 | palette.secondary.light, 61 | ], 62 | ]; 63 | return this.renderMatrix(matrix); 64 | } 65 | } 66 | 67 | export default withStyles({ 68 | root: { 69 | borderRadius: '10%', 70 | // border: '#8c8c8c 1px solid', 71 | overflow: 'hidden', 72 | // width: 128, 73 | // height: 128, 74 | width: '100%', 75 | height: '100%', 76 | display: 'flex', 77 | flexDirection: 'column', 78 | justifyContent: 'space-between', 79 | }, 80 | row: { 81 | display: 'flex', 82 | width: '100%', 83 | height: 1, 84 | flexGrow: 1, 85 | }, 86 | pixel: { 87 | backgroundColor: 'rgba(0,0,0,0)', 88 | width: '100%', 89 | height: '100%', 90 | borderRight: '1px inset rgba(0,0,0,0.1)', 91 | borderBottom: '1px solid rgba(0,0,0,0.1)' 92 | }, 93 | })(ThemeAva); 94 | -------------------------------------------------------------------------------- /src/ui/ThemesList/List.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { withStyles } from '@material-ui/core/styles'; 4 | import List from '@material-ui/core/List'; 5 | import ListItem from '@material-ui/core/ListItem'; 6 | import ListItemText from '@material-ui/core/ListItemText'; 7 | import Avatar from '@material-ui/core/Avatar'; 8 | import ThemeAva from '../ThemeAva'; 9 | 10 | const styles = theme => ({ 11 | root: { 12 | width: '100%', 13 | backgroundColor: theme.palette.background.paper, 14 | }, 15 | listItem: { 16 | paddingLeft: 0, 17 | }, 18 | listItemActive: { 19 | paddingLeft: 0, 20 | backgroundColor: 'rgba(0,0,0,0.15)', 21 | }, 22 | avatar: { 23 | width: 28, 24 | height: 28, 25 | borderRadius: 2, 26 | marginLeft: 4, 27 | marginRight: 16, 28 | }, 29 | }); 30 | 31 | class CheckboxListSecondary extends React.Component { 32 | state = { 33 | checked: [1], 34 | }; 35 | 36 | handleToggle = value => () => { 37 | const { checked } = this.state; 38 | const currentIndex = checked.indexOf(value); 39 | const newChecked = [...checked]; 40 | 41 | if (currentIndex === -1) { 42 | newChecked.push(value); 43 | } else { 44 | newChecked.splice(currentIndex, 1); 45 | } 46 | 47 | this.setState({ 48 | checked: newChecked, 49 | }); 50 | }; 51 | 52 | onClick = id => () => this.props.onClick(id); 53 | 54 | render() { 55 | const { classes, themesList, currentThemeId } = this.props; 56 | const isActive = theme => theme.id === currentThemeId; 57 | return ( 58 | <div className={classes.root}> 59 | <List> 60 | {themesList.map(theme => ( 61 | <ListItem 62 | key={theme.name} 63 | dense 64 | button 65 | className={ 66 | isActive(theme) ? classes.listItemActive : classes.listItem 67 | } 68 | onClick={this.onClick(theme.id)} 69 | > 70 | <Avatar className={classes.avatar}> 71 | <ThemeAva theme={theme.theme} /> 72 | </Avatar> 73 | <ListItemText 74 | primary={`${theme.name}`} 75 | secondary={theme.query} 76 | /> 77 | {/* <ListItemSecondaryAction> 78 | <Checkbox 79 | onChange={this.handleToggle(value)} 80 | checked={this.state.checked.indexOf(value) !== -1} 81 | /> 82 | </ListItemSecondaryAction> */} 83 | </ListItem> 84 | ))} 85 | </List> 86 | </div> 87 | ); 88 | } 89 | } 90 | 91 | CheckboxListSecondary.propTypes = { 92 | classes: PropTypes.object.isRequired, 93 | }; 94 | 95 | export default withStyles(styles)(CheckboxListSecondary); 96 | -------------------------------------------------------------------------------- /src/ui/ThemesList/ThemesList.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { withStyles } from '@material-ui/core/styles'; 3 | import TextField from '@material-ui/core/TextField'; 4 | import Button from '@material-ui/core/Button'; 5 | import Divider from '@material-ui/core/Divider'; 6 | 7 | import List from './List'; 8 | 9 | const themesListStyles = { 10 | root: { 11 | padding: 16, 12 | height: 'calc(100% - 32px);', 13 | }, 14 | paper: { 15 | height: '100%', 16 | 17 | overflowX: 'hidden', 18 | display: 'flex', 19 | flexDirection: 'column', 20 | justifyContent: 'space-between', 21 | }, 22 | listContainer: { 23 | height: 100, 24 | overflowY: 'auto', 25 | overflowX: 'hidden', 26 | flexGrow: 1, 27 | }, 28 | divider: { 29 | margin: '8px 0px', 30 | }, 31 | textField: { 32 | // marginLeft: theme.spacing.unit, 33 | // marginRight: theme.spacing.unit, 34 | width: 200, 35 | height: 30, 36 | flexGrow: 1, 37 | marginRight: 8, 38 | }, 39 | textInput: { 40 | height: 30, 41 | }, 42 | inputSection: { 43 | display: 'flex', 44 | flexDirection: 'row', 45 | justifyContent: 'space-between', 46 | }, 47 | addButton: { 48 | marginRight: 8, 49 | }, 50 | }; 51 | 52 | class ThemesList extends React.Component { 53 | input = null; 54 | 55 | onAdd = () => { 56 | const val = this.input.value; 57 | if (!val) return 58 | this.props.onAdd(val); 59 | 60 | }; 61 | 62 | componentDidUpdate() { 63 | // this.listContainer.scrollTop = this.listContainer.scrollHeight; 64 | } 65 | 66 | render() { 67 | const { classes, themesList, onClick, currentThemeId } = this.props; 68 | return ( 69 | <div name="ThemesList" className={classes.root}> 70 | <div className={classes.paper}> 71 | <div name="listContainer" className={classes.listContainer} ref={ref => {this.listContainer = ref }}> 72 | <List themesList={themesList} onClick={onClick} currentThemeId={currentThemeId}/> 73 | </div> 74 | <Divider classes={{root: classes.divider}}/> 75 | <div className={classes.inputSection}> 76 | <TextField 77 | // value="https://material.io/tools/color/#!/?view.left=0&view.right=0&primary.color=3949AB&secondary.color=388E3C" 78 | inputRef={ref => (this.input = ref)} 79 | className={classes.textField} 80 | InputProps={{className: classes.textInput}} 81 | placeholder="Paste URL here" 82 | margin="normal" 83 | /> 84 | <Button 85 | className={classes.addButton} 86 | color="primary" 87 | variant="contained" 88 | onClick={this.onAdd} 89 | > 90 | Add 91 | </Button> 92 | </div> 93 | </div> 94 | <div /> 95 | </div> 96 | ); 97 | } 98 | } 99 | 100 | export default withStyles(themesListStyles)(ThemesList); 101 | -------------------------------------------------------------------------------- /src/ui/ThemesList/index.js: -------------------------------------------------------------------------------- 1 | import ThemesList from './ThemesList' 2 | 3 | export default ThemesList; 4 | -------------------------------------------------------------------------------- /src/ui/Title.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { withStyles } from '@material-ui/core/styles'; 3 | import AppBar from '@material-ui/core/AppBar'; 4 | import Toolbar from '@material-ui/core/Toolbar'; 5 | import Typography from '@material-ui/core/Typography'; 6 | import Button from '@material-ui/core/Button'; 7 | import Tooltip from '@material-ui/core/Tooltip'; 8 | import Zoom from '@material-ui/core/Zoom'; 9 | import IconButton from '@material-ui/core/IconButton'; 10 | 11 | import logoImage from './logoImage'; 12 | 13 | const styles = theme => ({ 14 | root: { 15 | // flexGrow: 1, 16 | }, 17 | flex: { 18 | flexGrow: 1, 19 | }, 20 | menuButton: { 21 | marginLeft: -12, 22 | marginRight: 20, 23 | }, 24 | button: { 25 | borderColor: '#949494', 26 | }, 27 | oktobutton: { 28 | marginRight: 16, 29 | }, 30 | tooltip: { 31 | backgroundColor: theme.palette.primary.main, 32 | opacity: 1, 33 | }, 34 | }); 35 | 36 | const LogoImage = withStyles({ 37 | root: { 38 | margin: '0px 16px', 39 | padding: 0, 40 | }, 41 | img: { 42 | width: 40, 43 | borderRadius: 2, 44 | }, 45 | })(({ classes }) => ( 46 | <a className={classes.root} href="https://github.com/react-theming"> 47 | <img className={classes.img} src={logoImage} alt="React Theming" /> 48 | </a> 49 | )); 50 | 51 | const Oktocat = withStyles({ 52 | root: { 53 | width: 28, 54 | fill: 'white', 55 | }, 56 | })(({ classes }) => ( 57 | <svg 58 | className={classes.root} 59 | focusable="false" 60 | viewBox="0 0 24 24" 61 | aria-hidden="true" 62 | > 63 | <path d="M12 .3a12 12 0 0 0-3.8 23.4c.6.1.8-.3.8-.6v-2c-3.3.7-4-1.6-4-1.6-.6-1.4-1.4-1.8-1.4-1.8-1-.7.1-.7.1-.7 1.2 0 1.9 1.2 1.9 1.2 1 1.8 2.8 1.3 3.5 1 0-.8.4-1.3.7-1.6-2.7-.3-5.5-1.3-5.5-6 0-1.2.5-2.3 1.3-3.1-.2-.4-.6-1.6 0-3.2 0 0 1-.3 3.4 1.2a11.5 11.5 0 0 1 6 0c2.3-1.5 3.3-1.2 3.3-1.2.6 1.6.2 2.8 0 3.2.9.8 1.3 1.9 1.3 3.2 0 4.6-2.8 5.6-5.5 5.9.5.4.9 1 .9 2.2v3.3c0 .3.1.7.8.6A12 12 0 0 0 12 .3" /> 64 | </svg> 65 | )); 66 | 67 | const ShortGuide = withStyles({ 68 | root: { 69 | padding: 8, 70 | fontSize: 14, 71 | textAlign: 'center', 72 | }, 73 | list: { 74 | textAlign: 'left', 75 | listStyleType: 'none', 76 | padding: 4, 77 | '&>li': { marginBottom: 8 }, 78 | }, 79 | link: { 80 | color: '#7ab8ff', 81 | }, 82 | })(({ classes }) => ( 83 | <div className={classes.root}> 84 | <ul className={classes.list}> 85 | <li> 86 | 1. Open{' '} 87 | <a 88 | className={classes.link} 89 | href="https://material.io/tools/color" 90 | target="_blank" 91 | rel="noopener noreferrer" 92 | > 93 | https://material.io/tools/color 94 | </a> 95 | </li> 96 | <li>2. Select colors</li> 97 | <li>3. Drag & Drop address string back to this page</li> 98 | </ul> 99 | <span>Press for details</span> 100 | </div> 101 | )); 102 | 103 | function Title(props) { 104 | const { classes, onHelp } = props; 105 | return ( 106 | <div className={classes.root}> 107 | <AppBar position="static"> 108 | <Toolbar> 109 | <LogoImage /> 110 | <Typography variant="title" color="inherit" className={classes.flex}> 111 | Create MUI Theme 112 | </Typography> 113 | <IconButton 114 | className={classes.oktobutton} 115 | href="https://github.com/react-theming/create-mui-theme" 116 | target="_blank" 117 | color="inherit" 118 | > 119 | <Oktocat /> 120 | </IconButton> 121 | <Tooltip 122 | TransitionComponent={Zoom} 123 | TransitionProps={{ timeout: 600 }} 124 | title={<ShortGuide />} 125 | placement="bottom-start" 126 | classes={{ 127 | tooltip: classes.tooltip, 128 | }} 129 | leaveDelay={1000} 130 | > 131 | <Button 132 | variant="outlined" 133 | color="secondary" 134 | className={classes.button} 135 | onClick={onHelp} 136 | > 137 | How to use it? 138 | </Button> 139 | </Tooltip> 140 | </Toolbar> 141 | </AppBar> 142 | </div> 143 | ); 144 | } 145 | 146 | export default withStyles(styles)(Title); 147 | -------------------------------------------------------------------------------- /src/ui/logoImage.js: -------------------------------------------------------------------------------- 1 | export default 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAGQCAYAAACAvzbMAAAACXBIWXMAAAsTAAALEwEAmpwYAAAKT2lDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjanVNnVFPpFj333vRCS4iAlEtvUhUIIFJCi4AUkSYqIQkQSoghodkVUcERRUUEG8igiAOOjoCMFVEsDIoK2AfkIaKOg6OIisr74Xuja9a89+bN/rXXPues852zzwfACAyWSDNRNYAMqUIeEeCDx8TG4eQuQIEKJHAAEAizZCFz/SMBAPh+PDwrIsAHvgABeNMLCADATZvAMByH/w/qQplcAYCEAcB0kThLCIAUAEB6jkKmAEBGAYCdmCZTAKAEAGDLY2LjAFAtAGAnf+bTAICd+Jl7AQBblCEVAaCRACATZYhEAGg7AKzPVopFAFgwABRmS8Q5ANgtADBJV2ZIALC3AMDOEAuyAAgMADBRiIUpAAR7AGDIIyN4AISZABRG8lc88SuuEOcqAAB4mbI8uSQ5RYFbCC1xB1dXLh4ozkkXKxQ2YQJhmkAuwnmZGTKBNA/g88wAAKCRFRHgg/P9eM4Ors7ONo62Dl8t6r8G/yJiYuP+5c+rcEAAAOF0ftH+LC+zGoA7BoBt/qIl7gRoXgugdfeLZrIPQLUAoOnaV/Nw+H48PEWhkLnZ2eXk5NhKxEJbYcpXff5nwl/AV/1s+X48/Pf14L7iJIEyXYFHBPjgwsz0TKUcz5IJhGLc5o9H/LcL//wd0yLESWK5WCoU41EScY5EmozzMqUiiUKSKcUl0v9k4t8s+wM+3zUAsGo+AXuRLahdYwP2SycQWHTA4vcAAPK7b8HUKAgDgGiD4c93/+8//UegJQCAZkmScQAAXkQkLlTKsz/HCAAARKCBKrBBG/TBGCzABhzBBdzBC/xgNoRCJMTCQhBCCmSAHHJgKayCQiiGzbAdKmAv1EAdNMBRaIaTcA4uwlW4Dj1wD/phCJ7BKLyBCQRByAgTYSHaiAFiilgjjggXmYX4IcFIBBKLJCDJiBRRIkuRNUgxUopUIFVIHfI9cgI5h1xGupE7yAAygvyGvEcxlIGyUT3UDLVDuag3GoRGogvQZHQxmo8WoJvQcrQaPYw2oefQq2gP2o8+Q8cwwOgYBzPEbDAuxsNCsTgsCZNjy7EirAyrxhqwVqwDu4n1Y8+xdwQSgUXACTYEd0IgYR5BSFhMWE7YSKggHCQ0EdoJNwkDhFHCJyKTqEu0JroR+cQYYjIxh1hILCPWEo8TLxB7iEPENyQSiUMyJ7mQAkmxpFTSEtJG0m5SI+ksqZs0SBojk8naZGuyBzmULCAryIXkneTD5DPkG+Qh8lsKnWJAcaT4U+IoUspqShnlEOU05QZlmDJBVaOaUt2ooVQRNY9aQq2htlKvUYeoEzR1mjnNgxZJS6WtopXTGmgXaPdpr+h0uhHdlR5Ol9BX0svpR+iX6AP0dwwNhhWDx4hnKBmbGAcYZxl3GK+YTKYZ04sZx1QwNzHrmOeZD5lvVVgqtip8FZHKCpVKlSaVGyovVKmqpqreqgtV81XLVI+pXlN9rkZVM1PjqQnUlqtVqp1Q61MbU2epO6iHqmeob1Q/pH5Z/YkGWcNMw09DpFGgsV/jvMYgC2MZs3gsIWsNq4Z1gTXEJrHN2Xx2KruY/R27iz2qqaE5QzNKM1ezUvOUZj8H45hx+Jx0TgnnKKeX836K3hTvKeIpG6Y0TLkxZVxrqpaXllirSKtRq0frvTau7aedpr1Fu1n7gQ5Bx0onXCdHZ4/OBZ3nU9lT3acKpxZNPTr1ri6qa6UbobtEd79up+6Ynr5egJ5Mb6feeb3n+hx9L/1U/W36p/VHDFgGswwkBtsMzhg8xTVxbzwdL8fb8VFDXcNAQ6VhlWGX4YSRudE8o9VGjUYPjGnGXOMk423GbcajJgYmISZLTepN7ppSTbmmKaY7TDtMx83MzaLN1pk1mz0x1zLnm+eb15vft2BaeFostqi2uGVJsuRaplnutrxuhVo5WaVYVVpds0atna0l1rutu6cRp7lOk06rntZnw7Dxtsm2qbcZsOXYBtuutm22fWFnYhdnt8Wuw+6TvZN9un2N/T0HDYfZDqsdWh1+c7RyFDpWOt6azpzuP33F9JbpL2dYzxDP2DPjthPLKcRpnVOb00dnF2e5c4PziIuJS4LLLpc+Lpsbxt3IveRKdPVxXeF60vWdm7Obwu2o26/uNu5p7ofcn8w0nymeWTNz0MPIQ+BR5dE/C5+VMGvfrH5PQ0+BZ7XnIy9jL5FXrdewt6V3qvdh7xc+9j5yn+M+4zw33jLeWV/MN8C3yLfLT8Nvnl+F30N/I/9k/3r/0QCngCUBZwOJgUGBWwL7+Hp8Ib+OPzrbZfay2e1BjKC5QRVBj4KtguXBrSFoyOyQrSH355jOkc5pDoVQfujW0Adh5mGLw34MJ4WHhVeGP45wiFga0TGXNXfR3ENz30T6RJZE3ptnMU85ry1KNSo+qi5qPNo3ujS6P8YuZlnM1VidWElsSxw5LiquNm5svt/87fOH4p3iC+N7F5gvyF1weaHOwvSFpxapLhIsOpZATIhOOJTwQRAqqBaMJfITdyWOCnnCHcJnIi/RNtGI2ENcKh5O8kgqTXqS7JG8NXkkxTOlLOW5hCepkLxMDUzdmzqeFpp2IG0yPTq9MYOSkZBxQqohTZO2Z+pn5mZ2y6xlhbL+xW6Lty8elQfJa7OQrAVZLQq2QqboVFoo1yoHsmdlV2a/zYnKOZarnivN7cyzytuQN5zvn//tEsIS4ZK2pYZLVy0dWOa9rGo5sjxxedsK4xUFK4ZWBqw8uIq2Km3VT6vtV5eufr0mek1rgV7ByoLBtQFr6wtVCuWFfevc1+1dT1gvWd+1YfqGnRs+FYmKrhTbF5cVf9go3HjlG4dvyr+Z3JS0qavEuWTPZtJm6ebeLZ5bDpaql+aXDm4N2dq0Dd9WtO319kXbL5fNKNu7g7ZDuaO/PLi8ZafJzs07P1SkVPRU+lQ27tLdtWHX+G7R7ht7vPY07NXbW7z3/T7JvttVAVVN1WbVZftJ+7P3P66Jqun4lvttXa1ObXHtxwPSA/0HIw6217nU1R3SPVRSj9Yr60cOxx++/p3vdy0NNg1VjZzG4iNwRHnk6fcJ3/ceDTradox7rOEH0x92HWcdL2pCmvKaRptTmvtbYlu6T8w+0dbq3nr8R9sfD5w0PFl5SvNUyWna6YLTk2fyz4ydlZ19fi753GDborZ752PO32oPb++6EHTh0kX/i+c7vDvOXPK4dPKy2+UTV7hXmq86X23qdOo8/pPTT8e7nLuarrlca7nuer21e2b36RueN87d9L158Rb/1tWeOT3dvfN6b/fF9/XfFt1+cif9zsu72Xcn7q28T7xf9EDtQdlD3YfVP1v+3Njv3H9qwHeg89HcR/cGhYPP/pH1jw9DBY+Zj8uGDYbrnjg+OTniP3L96fynQ89kzyaeF/6i/suuFxYvfvjV69fO0ZjRoZfyl5O/bXyl/erA6xmv28bCxh6+yXgzMV70VvvtwXfcdx3vo98PT+R8IH8o/2j5sfVT0Kf7kxmTk/8EA5jz/GMzLdsAADoyaVRYdFhNTDpjb20uYWRvYmUueG1wAAAAAAA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/Pgo8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjYtYzExMSA3OS4xNTgzMjUsIDIwMTUvMDkvMTAtMDE6MTA6MjAgICAgICAgICI+CiAgIDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+CiAgICAgIDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiCiAgICAgICAgICAgIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIKICAgICAgICAgICAgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iCiAgICAgICAgICAgIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiCiAgICAgICAgICAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIKICAgICAgICAgICAgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIgogICAgICAgICAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyIKICAgICAgICAgICAgeG1sbnM6ZXhpZj0iaHR0cDovL25zLmFkb2JlLmNvbS9leGlmLzEuMC8iPgogICAgICAgICA8eG1wOkNyZWF0b3JUb29sPkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE1IChXaW5kb3dzKTwveG1wOkNyZWF0b3JUb29sPgogICAgICAgICA8eG1wOkNyZWF0ZURhdGU+MjAxNy0wNi0xNlQxNDo1NjozMyswNDowMDwveG1wOkNyZWF0ZURhdGU+CiAgICAgICAgIDx4bXA6TWV0YWRhdGFEYXRlPjIwMTctMDYtMTZUMTQ6NTY6MzMrMDQ6MDA8L3htcDpNZXRhZGF0YURhdGU+CiAgICAgICAgIDx4bXA6TW9kaWZ5RGF0ZT4yMDE3LTA2LTE2VDE0OjU2OjMzKzA0OjAwPC94bXA6TW9kaWZ5RGF0ZT4KICAgICAgICAgPHhtcE1NOkluc3RhbmNlSUQ+eG1wLmlpZDpjZjlmMDBmMS02OTRiLWE4NDQtYTNjNC1hZGE5Nzk4OTI4MjE8L3htcE1NOkluc3RhbmNlSUQ+CiAgICAgICAgIDx4bXBNTTpEb2N1bWVudElEPmFkb2JlOmRvY2lkOnBob3Rvc2hvcDo0YzkyYmQ5OC01MjgyLTExZTctODdiYy1jYWZlMmU5NWMyZDA8L3htcE1NOkRvY3VtZW50SUQ+CiAgICAgICAgIDx4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ+eG1wLmRpZDoxMmE3YjI4Ny02OTExLTFlNDctYmNkOS1iN2U4ZDA5MmYyYTc8L3htcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD4KICAgICAgICAgPHhtcE1NOkhpc3Rvcnk+CiAgICAgICAgICAgIDxyZGY6U2VxPgogICAgICAgICAgICAgICA8cmRmOmxpIHJkZjpwYXJzZVR5cGU9IlJlc291cmNlIj4KICAgICAgICAgICAgICAgICAgPHN0RXZ0OmFjdGlvbj5jcmVhdGVkPC9zdEV2dDphY3Rpb24+CiAgICAgICAgICAgICAgICAgIDxzdEV2dDppbnN0YW5jZUlEPnhtcC5paWQ6MTJhN2IyODctNjkxMS0xZTQ3LWJjZDktYjdlOGQwOTJmMmE3PC9zdEV2dDppbnN0YW5jZUlEPgogICAgICAgICAgICAgICAgICA8c3RFdnQ6d2hlbj4yMDE3LTA2LTE2VDE0OjU2OjMzKzA0OjAwPC9zdEV2dDp3aGVuPgogICAgICAgICAgICAgICAgICA8c3RFdnQ6c29mdHdhcmVBZ2VudD5BZG9iZSBQaG90b3Nob3AgQ0MgMjAxNSAoV2luZG93cyk8L3N0RXZ0OnNvZnR3YXJlQWdlbnQ+CiAgICAgICAgICAgICAgIDwvcmRmOmxpPgogICAgICAgICAgICAgICA8cmRmOmxpIHJkZjpwYXJzZVR5cGU9IlJlc291cmNlIj4KICAgICAgICAgICAgICAgICAgPHN0RXZ0OmFjdGlvbj5zYXZlZDwvc3RFdnQ6YWN0aW9uPgogICAgICAgICAgICAgICAgICA8c3RFdnQ6aW5zdGFuY2VJRD54bXAuaWlkOmNmOWYwMGYxLTY5NGItYTg0NC1hM2M0LWFkYTk3OTg5MjgyMTwvc3RFdnQ6aW5zdGFuY2VJRD4KICAgICAgICAgICAgICAgICAgPHN0RXZ0OndoZW4+MjAxNy0wNi0xNlQxNDo1NjozMyswNDowMDwvc3RFdnQ6d2hlbj4KICAgICAgICAgICAgICAgICAgPHN0RXZ0OnNvZnR3YXJlQWdlbnQ+QWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpPC9zdEV2dDpzb2Z0d2FyZUFnZW50PgogICAgICAgICAgICAgICAgICA8c3RFdnQ6Y2hhbmdlZD4vPC9zdEV2dDpjaGFuZ2VkPgogICAgICAgICAgICAgICA8L3JkZjpsaT4KICAgICAgICAgICAgPC9yZGY6U2VxPgogICAgICAgICA8L3htcE1NOkhpc3Rvcnk+CiAgICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2UvcG5nPC9kYzpmb3JtYXQ+CiAgICAgICAgIDxwaG90b3Nob3A6Q29sb3JNb2RlPjM8L3Bob3Rvc2hvcDpDb2xvck1vZGU+CiAgICAgICAgIDxwaG90b3Nob3A6SUNDUHJvZmlsZT5zUkdCIElFQzYxOTY2LTIuMTwvcGhvdG9zaG9wOklDQ1Byb2ZpbGU+CiAgICAgICAgIDx0aWZmOk9yaWVudGF0aW9uPjE8L3RpZmY6T3JpZW50YXRpb24+CiAgICAgICAgIDx0aWZmOlhSZXNvbHV0aW9uPjcyMDAwMC8xMDAwMDwvdGlmZjpYUmVzb2x1dGlvbj4KICAgICAgICAgPHRpZmY6WVJlc29sdXRpb24+NzIwMDAwLzEwMDAwPC90aWZmOllSZXNvbHV0aW9uPgogICAgICAgICA8dGlmZjpSZXNvbHV0aW9uVW5pdD4yPC90aWZmOlJlc29sdXRpb25Vbml0PgogICAgICAgICA8ZXhpZjpDb2xvclNwYWNlPjE8L2V4aWY6Q29sb3JTcGFjZT4KICAgICAgICAgPGV4aWY6UGl4ZWxYRGltZW5zaW9uPjQwMDwvZXhpZjpQaXhlbFhEaW1lbnNpb24+CiAgICAgICAgIDxleGlmOlBpeGVsWURpbWVuc2lvbj40MDA8L2V4aWY6UGl4ZWxZRGltZW5zaW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAKPD94cGFja2V0IGVuZD0idyI/PoVc/LkAAAAgY0hSTQAAeiUAAICDAAD5/wAAgOkAAHUwAADqYAAAOpgAABdvkl/FRgAABOxJREFUeNrs17EJAkEQhlFXbGNbsIKrQATjCzWzB1EEQ40t4RITQa3gKrCFwwK0gbUCQ2FY3ivhh+Fj0n37KiPCaIbOCIH0uTWC++CHsQkAEBAABAQAAQFAQABAQAAQEAAEBAABAUBAAEBAABAQAAQEAAEBQEAAQEAAEBAABAQAAQFAQABAQAAQEAAEBAABAUBAAEBAABAQAAQEAAEBQEAAQEAAEBAABAQAAQFAQABAQAAQEAAEBAABAQABAUBAABAQAAQEAAEBAAEBQEAAEBAABAQAAQEAAQFAQAAQEAAEBAABAQABAUBAABAQAAQEAAEBAAEBQEAAEBAABAQAAQEAAQFAQAAQEAAEBAABAQABAUBAABAQAAQEAAEBAAEBQEAAEBAABAQABAQAAQFAQAAQEAAEBAAEBAABAUBAABAQAAQEAAQEAAEBQEAAEBAABAQABAQAAQFAQAAQEAAEBAAEBID/mDRDZ4VIRZ9fjBBIc7NBJH1ujeADAUBAABAQABAQAAQEAAEBQEAAEBAAEBAABAQAAQFAQABAQAAQEAAEBAABAUBAAEBAABAQAAQEAAEBQEAAQEAAEBAABAQAAQFAQABAQAAQEAAEBAABAUBAAEBAABAQAAQEAAEBQEAAQEAAEBAABAQAAQFAQABAQAAQEAAEBAABAUBAAEBAABAQAAQEAAEBAAEBQEAAEBAABAQAAQEAAQFAQAAQEAAEBAABAQABAUBAABAQAAQEAAEBAAEBQEAAEBAABAQAAQEAAQFAQAAQEAAEBAABAQABAUBAABAQAAQEAAEBAAEBQEAAEBAABAQABAQAAQFAQAAQEAAEBAAEBAABAUBAABAQAAQEAAQEAAEBQEAAEBAA6pdKKcUMcXxWJyMEct09jRDIYj81gg8EAAEBQEAAQEAAEBAABAQAAQFAQABAQAAQEAAEBAABAQABAUBAABAQAAQEAAEBAAEBQEAAEBAABAQAAQEAAQFAQAAQEAAEBAABAQABAUBAABAQAAQEAAEBAAEBQEAAEBAABAQAAQEAAQFAQAAQEAAEBAABAQABAUBAABAQAAQEAAEBAAEBQEAAEBAABAQABAQAAQFAQAAQEAAEBAAEBAABAUBAABAQAAQEAAQEAAEBQEAAEBAABAQABAQAAQFAQAAQEAAEBAAEBAABAUBAABAQAAQEAAQEAAEBQEAAEBAABAQABAQAAQFAQAAQEAAQEAAEBAABAUBAABAQABAQAAQEAAEBQEAAEBAAEBAABAQAAQFAQACoX3ovj8UMcWxmayMEcnicjRBIn1sj+EAAEBAABAQABAQAAQFAQAAQEAAEBAAEBAABAUBAABAQABAQAAQEAAEBQEAAEBAAEBAABAQAAQFAQAAQEAAQEAAEBAABAUBAABAQABAQAAQEAAEBQEAAEBAAEBAABAQAAQFAQAAQEAAQEAAEBAABAUBAABAQABAQAAQEAAEBQEAAEBAAEBAABAQAAQFAQABAQAAQEAAEBAABAUBAAEBAABAQAAQEAAEBQEAAQEAAEBAABAQAAQFAQABAQAAQEAAEBAABAUBAAEBAABAQAAQEAAEBQEAAQEAAEBAABAQAAQFAQABAQAAQEAAEBAABAQABAUBAABAQAAQEAAEBAAEBQEAAEBAABAQAAQEAAQFAQAAQEAAEBID6fQEAAP//AwBnPh/bFEiVtAAAAABJRU5ErkJggg=='; 2 | -------------------------------------------------------------------------------- /src/ui/theme/index.js: -------------------------------------------------------------------------------- 1 | import { createMuiTheme } from '@material-ui/core/styles'; 2 | 3 | const palette = { 4 | primary: { main: '#444444' }, 5 | secondary: { main: '#E0E0E0' }, 6 | }; 7 | 8 | const spacing = { 9 | unit: 2, 10 | } 11 | 12 | export default createMuiTheme({ palette, spacing }); --------------------------------------------------------------------------------