├── pipfile
├── templates
    ├── .gitkeep
    └── html.template
├── Makefile
├── colors
    ├── blue-dark-bg.svg
    ├── blue-dark-text.svg
    ├── growth-blue-bg.svg
    ├── metro-blue-bg.svg
    ├── growth-blue-text.svg
    ├── metro-blue-text.svg
    ├── metro-dark-green-bg.svg
    ├── terminal-green-bg.svg
    ├── metro-dark-green-text.svg
    └── terminal-green-text.svg
├── generator.py
├── .gitignore
├── README.md
└── index.html


/pipfile:
--------------------------------------------------------------------------------
1 | svgwrite


--------------------------------------------------------------------------------
/templates/.gitkeep:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/Makefile:
--------------------------------------------------------------------------------
1 | index:
2 | 	pandoc README.md --template=templates/html.template -o index.html
3 | 


--------------------------------------------------------------------------------
/colors/blue-dark-bg.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="utf-8" ?>
2 | <svg baseProfile="full" height="60" version="1.1" width="180" xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xlink="http://www.w3.org/1999/xlink"><defs /><rect fill="#50616D" height="60" width="180" x="0" y="0" /></svg>


--------------------------------------------------------------------------------
/colors/blue-dark-text.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="utf-8" ?>
2 | <svg baseProfile="full" height="30" version="1.1" width="180" xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xlink="http://www.w3.org/1999/xlink"><defs /><text fill="#50616D" x="10" y="20">Blue Dark:#50616D</text></svg>


--------------------------------------------------------------------------------
/colors/growth-blue-bg.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="utf-8" ?>
2 | <svg baseProfile="full" height="60" version="1.1" width="180" xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xlink="http://www.w3.org/1999/xlink"><defs /><rect fill="#179ED6" height="60" width="180" x="0" y="0" /></svg>


--------------------------------------------------------------------------------
/colors/metro-blue-bg.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="utf-8" ?>
2 | <svg baseProfile="full" height="60" version="1.1" width="180" xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xlink="http://www.w3.org/1999/xlink"><defs /><rect fill="#2d89ef" height="60" width="180" x="0" y="0" /></svg>


--------------------------------------------------------------------------------
/colors/growth-blue-text.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="utf-8" ?>
2 | <svg baseProfile="full" height="30" version="1.1" width="180" xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xlink="http://www.w3.org/1999/xlink"><defs /><text fill="#179ED6" x="10" y="20">Growth Blue:#179ED6</text></svg>


--------------------------------------------------------------------------------
/colors/metro-blue-text.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="utf-8" ?>
2 | <svg baseProfile="full" height="30" version="1.1" width="180" xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xlink="http://www.w3.org/1999/xlink"><defs /><text fill="#2d89ef" x="10" y="20">Metro Blue:#2d89ef</text></svg>


--------------------------------------------------------------------------------
/colors/metro-dark-green-bg.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="utf-8" ?>
2 | <svg baseProfile="full" height="60" version="1.1" width="180" xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xlink="http://www.w3.org/1999/xlink"><defs /><rect fill="#1e7145" height="60" width="180" x="0" y="0" /></svg>


--------------------------------------------------------------------------------
/colors/terminal-green-bg.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="utf-8" ?>
2 | <svg baseProfile="full" height="60" version="1.1" width="180" xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xlink="http://www.w3.org/1999/xlink"><defs /><rect fill="#30ea30" height="60" width="180" x="0" y="0" /></svg>


--------------------------------------------------------------------------------
/colors/metro-dark-green-text.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="utf-8" ?>
2 | <svg baseProfile="full" height="30" version="1.1" width="180" xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xlink="http://www.w3.org/1999/xlink"><defs /><text fill="#1e7145" x="10" y="20">Dark Green:#1e7145</text></svg>


--------------------------------------------------------------------------------
/colors/terminal-green-text.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="utf-8" ?>
2 | <svg baseProfile="full" height="30" version="1.1" width="180" xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xlink="http://www.w3.org/1999/xlink"><defs /><text fill="#30ea30" x="10" y="20">Terminal Green:#30ea30</text></svg>


--------------------------------------------------------------------------------
/generator.py:
--------------------------------------------------------------------------------
 1 | import svgwrite
 2 | import sys
 3 | 
 4 | 
 5 | def draw_text(file_name, color_name, color):
 6 |     dwg = svgwrite.Drawing('colors/' + file_name + '-text.svg', size=(u'180', u'30'))
 7 |     dwg.add(dwg.text(color_name + ':' + color, insert=(10, 20), fill=color))
 8 |     dwg.save()
 9 | 
10 | 
11 | def draw_bg(file_name, color):
12 |     dwg = svgwrite.Drawing('colors/' + file_name + '-bg.svg', size=(u'180', u'60'))
13 |     dwg.add(dwg.rect((0, 0), (180, 60), fill=color))
14 |     dwg.save()
15 | 
16 | 
17 | if __name__ == '__main__':
18 |     file_name = sys.argv[1]
19 |     color_name = sys.argv[2]
20 |     color = sys.argv[3]
21 | 
22 |     draw_text(file_name=file_name, color_name=color_name, color=color)
23 |     draw_bg(file_name=file_name, color=color)
24 | 
25 |     print('---------------------Markdown---------------------')
26 |     print(color_name + '   '
27 |           ' | '
28 |           '<a><img src="https://phodal.github.io/colors/colors/' + file_name + '-text.svg"/></a>          '
29 |           ' | '
30 |           '<a><img src="https://phodal.github.io/colors/colors/' + file_name + '-bg.svg"/></a>'
31 |           ' | '
32 |            + color)


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | ### Python template
 2 | # Byte-compiled / optimized / DLL files
 3 | __pycache__/
 4 | *.py[cod]
 5 | *$py.class
 6 | 
 7 | # C extensions
 8 | *.so
 9 | 
10 | # Distribution / packaging
11 | .Python
12 | env/
13 | build/
14 | develop-eggs/
15 | dist/
16 | downloads/
17 | eggs/
18 | .eggs/
19 | lib/
20 | lib64/
21 | parts/
22 | sdist/
23 | var/
24 | *.egg-info/
25 | .installed.cfg
26 | *.egg
27 | 
28 | # PyInstaller
29 | #  Usually these files are written by a python script from a template
30 | #  before PyInstaller builds the exe, so as to inject date/other infos into it.
31 | *.manifest
32 | *.spec
33 | 
34 | # Installer logs
35 | pip-log.txt
36 | pip-delete-this-directory.txt
37 | 
38 | # Unit test / coverage reports
39 | htmlcov/
40 | .tox/
41 | .coverage
42 | .coverage.*
43 | .cache
44 | nosetests.xml
45 | coverage.xml
46 | *,cover
47 | .hypothesis/
48 | 
49 | # Translations
50 | *.mo
51 | *.pot
52 | 
53 | # Django stuff:
54 | *.log
55 | local_settings.py
56 | 
57 | # Flask instance folder
58 | instance/
59 | 
60 | # Scrapy stuff:
61 | .scrapy
62 | 
63 | # Sphinx documentation
64 | docs/_build/
65 | 
66 | # PyBuilder
67 | target/
68 | 
69 | # IPython Notebook
70 | .ipynb_checkpoints
71 | 
72 | # pyenv
73 | .python-version
74 | 
75 | # celery beat schedule file
76 | celerybeat-schedule
77 | 
78 | # dotenv
79 | .env
80 | 
81 | # virtualenv
82 | venv/
83 | ENV/
84 | 
85 | # Spyder project settings
86 | .spyderproject
87 | 
88 | # Rope project settings
89 | .ropeproject
90 | 
91 | # Created by .ignore support plugin (hsz.mobi)
92 | 


--------------------------------------------------------------------------------
/templates/html.template:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html$if(lang)$ lang="$lang$"$endif$>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <meta name="generator" content="pandoc">
 6 | $for(author-meta)$
 7 |   <meta name="author" content="$author-meta$">
 8 | $endfor$
 9 | $if(date-meta)$
10 |   <meta name="dcterms.date" content="$date-meta$">
11 | $endif$
12 |   <title>$if(title-prefix)$$title-prefix$ - $endif$$pagetitle$</title>
13 |   <style type="text/css">code{white-space: pre;}</style>
14 |   <!--[if lt IE 9]>
15 |     <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
16 |   <![endif]-->
17 | $if(quotes)$
18 |   <style type="text/css">q { quotes: "“" "”" "‘" "’"; }</style>
19 | $endif$
20 | $if(highlighting-css)$
21 |   <style type="text/css">
22 | $highlighting-css$
23 |   </style>
24 | $endif$
25 | $for(css)$
26 |   <link rel="stylesheet" href="$css$">
27 | $endfor$
28 | $if(math)$
29 |   $math$
30 | $endif$
31 | $for(header-includes)$
32 |   $header-includes$
33 | $endfor$
34 | </head>
35 | <body>
36 | $for(include-before)$
37 | $include-before$
38 | $endfor$
39 | $if(title)$
40 | <header>
41 | $if(date)$
42 | <h3 class="date">$date$</h3>
43 | $endif$
44 | 
45 | <h1 class="title">$title$</h1>
46 | 
47 | 
48 | $for(author)$
49 | <h2 class="author">$author.name$</h2>
50 | <p class="affilation"><em>$author.affiliation$</em></p>
51 | $endfor$
52 | 
53 | </header>
54 | $endif$
55 | $if(toc)$
56 | <nav id="$idprefix$TOC">
57 | $toc$
58 | </nav>
59 | $endif$
60 | 
61 | $if(abstract)$
62 | 
63 | <p class="small"><strong>Abstract: </strong><em>$abstract$</em></p>
64 | 
65 | $endif$
66 | 
67 | 
68 | $body$
69 | </body>
70 | </html>
71 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Colors: A Collection of Phodal's usage in design
 2 | 
 3 | ```bash
 4 | python generate.py ouput_file_name color_name color
 5 | ```
 6 | 
 7 | example:
 8 | 
 9 | ```bash
10 | python generator.py 'metro-dark-green' 'Dark Green' '#1e7145'
11 | python generator.py 'metro-blue' 'Metro Blue' '#2d89ef'
12 | ```
13 | 
14 | Make Index Page
15 | 
16 | ```bash
17 | make index
18 | ```
19 | 
20 | Colors
21 | ------
22 | 
23 | Name          |    Value                                                 | BG Example           | Value for Copy
24 | --------------|----------------------------------------------------------|----------------------|---------------
25 | Metro Blue    | <a><img src="https://phodal.github.io/colors/colors/metro-blue-text.svg"/></a>          | <a><img src="https://phodal.github.io/colors/colors/metro-blue-bg.svg"/></a>  | #2d89ef
26 | Dark Green    | <a><img src="https://phodal.github.io/colors/colors/metro-dark-green-text.svg"/></a>           | <a><img src="https://phodal.github.io/colors/colors/metro-dark-green-bg.svg"/></a> | #1e7145
27 | Terminal Green    | <a><img src="https://phodal.github.io/colors/colors/terminal-green-text.svg"/></a>           | <a><img src="https://phodal.github.io/colors/colors/terminal-green-bg.svg"/></a> | #30ea30
28 | Blue Dark    | <a><img src="https://phodal.github.io/colors/colors/blue-dark-text.svg"/></a> | <a><img src="https://phodal.github.io/colors/colors/blue-dark-bg.svg"/></a> | #50616D
29 | Growth Blue    | <a><img src="https://phodal.github.io/colors/colors/growth-blue-text.svg"/></a>           | <a><img src="https://phodal.github.io/colors/colors/growth-blue-bg.svg"/></a> | #179ED6
30 | 
31 | Refs
32 | ---
33 | 
34 |  - http://www.calmar.ws/vim/256-xterm-24bit-rgb-color-chart.html
35 |  
36 | License
37 | ---
38 | 
39 | [![Phodal's Idea](http://brand.phodal.com/shields/idea-small.svg)](http://ideas.phodal.com/)
40 | 
41 | © 2016 A [Phodal Huang](https://www.phodal.com)'s [Idea](http://github.com/phodal/ideas).  This code is distributed under the MIT license. See `LICENSE` in this directory.
42 | 
43 | [待我代码编成，娶你为妻可好](http://www.xuntayizhan.com/blog/ji-ke-ai-qing-zhi-er-shi-dai-wo-dai-ma-bian-cheng-qu-ni-wei-qi-ke-hao-wan/)
44 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <meta name="generator" content="pandoc">
 6 |   <title></title>
 7 |   <style type="text/css">code{white-space: pre;}</style>
 8 |   <!--[if lt IE 9]>
 9 |     <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
10 |   <![endif]-->
11 |   <style type="text/css">
12 | div.sourceCode { overflow-x: auto; }
13 | table.sourceCode, tr.sourceCode, td.lineNumbers, td.sourceCode {
14 |   margin: 0; padding: 0; vertical-align: baseline; border: none; }
15 | table.sourceCode { width: 100%; line-height: 100%; }
16 | td.lineNumbers { text-align: right; padding-right: 4px; padding-left: 4px; color: #aaaaaa; border-right: 1px solid #aaaaaa; }
17 | td.sourceCode { padding-left: 5px; }
18 | code > span.kw { color: #007020; font-weight: bold; } /* Keyword */
19 | code > span.dt { color: #902000; } /* DataType */
20 | code > span.dv { color: #40a070; } /* DecVal */
21 | code > span.bn { color: #40a070; } /* BaseN */
22 | code > span.fl { color: #40a070; } /* Float */
23 | code > span.ch { color: #4070a0; } /* Char */
24 | code > span.st { color: #4070a0; } /* String */
25 | code > span.co { color: #60a0b0; font-style: italic; } /* Comment */
26 | code > span.ot { color: #007020; } /* Other */
27 | code > span.al { color: #ff0000; font-weight: bold; } /* Alert */
28 | code > span.fu { color: #06287e; } /* Function */
29 | code > span.er { color: #ff0000; font-weight: bold; } /* Error */
30 | code > span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */
31 | code > span.cn { color: #880000; } /* Constant */
32 | code > span.sc { color: #4070a0; } /* SpecialChar */
33 | code > span.vs { color: #4070a0; } /* VerbatimString */
34 | code > span.ss { color: #bb6688; } /* SpecialString */
35 | code > span.im { } /* Import */
36 | code > span.va { color: #19177c; } /* Variable */
37 | code > span.cf { color: #007020; font-weight: bold; } /* ControlFlow */
38 | code > span.op { color: #666666; } /* Operator */
39 | code > span.bu { } /* BuiltIn */
40 | code > span.ex { } /* Extension */
41 | code > span.pp { color: #bc7a00; } /* Preprocessor */
42 | code > span.at { color: #7d9029; } /* Attribute */
43 | code > span.do { color: #ba2121; font-style: italic; } /* Documentation */
44 | code > span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
45 | code > span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */
46 | code > span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */
47 |   </style>
48 | </head>
49 | <body>
50 | 
51 | 
52 | 
53 | <h1 id="colors-a-collection-of-phodals-usage-in-design">Colors: A Collection of Phodal's usage in design</h1>
54 | <div class="sourceCode"><pre class="sourceCode bash"><code class="sourceCode bash"><span class="kw">python</span> generate.py ouput_file_name color_name color </code></pre></div>
55 | <p>example:</p>
56 | <div class="sourceCode"><pre class="sourceCode bash"><code class="sourceCode bash"><span class="kw">python</span> generator.py <span class="st">&#39;metro-dark-green&#39;</span> <span class="st">&#39;Dark Green&#39;</span> <span class="st">&#39;#1e7145&#39;</span>
57 | <span class="kw">python</span> generator.py <span class="st">&#39;metro-blue&#39;</span> <span class="st">&#39;Metro Blue&#39;</span> <span class="st">&#39;#2d89ef&#39;</span></code></pre></div>
58 | <h2 id="colors">Colors</h2>
59 | <table>
60 | <thead>
61 | <tr class="header">
62 | <th>Name</th>
63 | <th>Value</th>
64 | <th>BG Example</th>
65 | </tr>
66 | </thead>
67 | <tbody>
68 | <tr class="odd">
69 | <td>Metro Blue</td>
70 | <td><a><img src="https://phodal.github.io/colors/colors/metro-blue-text.svg"/></a></td>
71 | <td><a><img src="https://phodal.github.io/colors/colors/metro-blue-bg.svg"/></a></td>
72 | </tr>
73 | <tr class="even">
74 | <td>Dark Green</td>
75 | <td><a><img src="https://phodal.github.io/colors/colors/metro-dark-green-text.svg"/></a></td>
76 | <td><a><img src="https://phodal.github.io/colors/colors/metro-dark-green-bg.svg"/></a></td>
77 | </tr>
78 | </tbody>
79 | </table>
80 | <h2 id="license">LICENSE</h2>
81 | <p>MIT</p>
82 | </body>
83 | </html>
84 | 


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