├── .dependabot └── config.yml ├── .editorconfig ├── .eslintrc.js ├── .gitignore ├── .postcssrc.js ├── .posthtmlrc.js ├── .tailwindrc.js ├── CHANGELOG.md ├── LICENSE ├── Makefile ├── README.md ├── docs ├── .docsrc.js ├── favicon.ico ├── images │ ├── dot.svg │ ├── favicon-128.png │ ├── favicon-152.png │ ├── favicon-167.png │ ├── favicon-180.png │ ├── favicon-192.png │ ├── favicon-196.png │ ├── favicon-32.png │ └── og-square.png ├── index.html ├── src │ ├── images │ │ └── dot.svg │ ├── index.pug │ └── styles.css └── styles.css ├── package-lock.json ├── package.json ├── packages ├── bootstrap │ ├── LICENSE │ ├── README.md │ ├── package.json │ └── src │ │ └── index.js ├── bulma │ ├── LICENSE │ ├── README.md │ ├── package.json │ └── src │ │ └── index.js ├── flatui │ ├── LICENSE │ ├── README.md │ ├── package.json │ └── src │ │ ├── american.js │ │ ├── aussie.js │ │ ├── british.js │ │ ├── canadian.js │ │ ├── chinese.js │ │ ├── dutch.js │ │ ├── french.js │ │ ├── german.js │ │ ├── index.js │ │ ├── indian.js │ │ ├── russian.js │ │ ├── spanish.js │ │ ├── swedish.js │ │ └── turkish.js ├── material │ ├── LICENSE │ ├── README.md │ ├── package.json │ └── src │ │ └── index.js ├── mrmrs │ ├── LICENSE │ ├── README.md │ ├── package.json │ └── src │ │ └── index.js ├── tailwind │ ├── LICENSE │ ├── README.md │ ├── package.json │ └── src │ │ └── index.js └── webcolors │ ├── LICENSE │ ├── README.md │ └── package.json ├── tasks ├── doc.js ├── index.js ├── json.js ├── publish.sh ├── serve.sh ├── util.js ├── version.js └── view.js └── templates ├── css.mustache ├── index.js.mustache ├── js.mustache ├── less.mustache ├── scss.mustache └── styl.mustache /.dependabot/config.yml: -------------------------------------------------------------------------------- 1 | version: 1 2 | update_configs: 3 | - package_manager: "javascript" 4 | directory: "/" 5 | update_schedule: "weekly" 6 | default_reviewers: 7 | - "zzzaim" 8 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig is awesome! 2 | 3 | # Mark this as the root editorconfig file 4 | root = true 5 | 6 | # Base ruleset for all files 7 | [*] 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | indent_style = space 11 | indent_size = 2 12 | 13 | # Override rules for markdown 14 | [*.md] 15 | # trailing whitespace is significant in markdown -> do not remove 16 | trim_trailing_whitespace = false 17 | 18 | # Override rules for Makefiles 19 | [Makefile] 20 | indent_style = tap 21 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | browser: true, 4 | commonjs: true, 5 | es6: true, 6 | node: true 7 | }, 8 | extends: ["eslint:recommended", "plugin:prettier/recommended"], 9 | globals: { 10 | Atomics: "readonly", 11 | SharedArrayBuffer: "readonly" 12 | }, 13 | parserOptions: { 14 | ecmaVersion: 2018 15 | }, 16 | ignorePatterns: ["!.*rc.js"], 17 | rules: {} 18 | }; 19 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Palette files are auto-generated during pre-pack/publish, 2 | # so they are not checked into the git repo. 3 | packages/**/*.js 4 | packages/**/*.json 5 | packages/**/*.css 6 | packages/**/*.less 7 | packages/**/*.scss 8 | packages/**/*.styl 9 | !packages/**/src/*.js 10 | 11 | .cache/ 12 | node_modules/ 13 | logs/ 14 | *.log 15 | -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | require("tailwindcss")("./.tailwindrc.js"), 4 | require("autoprefixer")({ 5 | flexbox: "no-2009" 6 | }) 7 | ] 8 | }; 9 | -------------------------------------------------------------------------------- /.posthtmlrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | "posthtml-pug": { locals: require("./tasks/doc") }, 4 | "posthtml-inline-svg": {} 5 | } 6 | }; 7 | -------------------------------------------------------------------------------- /.tailwindrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | separator: "_", 3 | theme: { 4 | extend: { 5 | colors: require("./tasks/doc").palettes, 6 | zIndex: { 7 | bg: "-1024" 8 | } 9 | } 10 | } 11 | }; 12 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. 4 | 5 | ### [2.0.1](https://github.com/zzzaim/webcolors/compare/v2.0.0...v2.0.1) (2020-03-02) 6 | 7 | 8 | ### Bug Fixes 9 | 10 | * correctly include webcolors package files ([4cd1e48](https://github.com/zzzaim/webcolors/commit/4cd1e48212e81c10f66c1285e37c66df9b6ea05b)) 11 | 12 | ## [2.0.0](https://github.com/zzzaim/webcolors/compare/v1.2.2...v2.0.0) (2020-03-02) 13 | 14 | 15 | ### ⚠ BREAKING CHANGES 16 | 17 | * Material palette now uses external `material-ui-colors` 18 | npm package to source its colors. 19 | * drop `color-*` prefix in variable names. 20 | * this package will no longer be published to bower 21 | 22 | ### Features 23 | 24 | * add more flatui palette schemes ([04565a6](https://github.com/zzzaim/webcolors/commit/04565a615cecb32db04b7385bdea0d0fa28823d5)) 25 | * add new "bootstrap" color palette (fixes [#3](https://github.com/zzzaim/webcolors/issues/3)) ([3fefce0](https://github.com/zzzaim/webcolors/commit/3fefce0de875782a47e544dcce2df2ad3957f743)) 26 | * add new "bulma" color palette (fixes [#4](https://github.com/zzzaim/webcolors/issues/4)) ([eb54e6c](https://github.com/zzzaim/webcolors/commit/eb54e6c6d31e76143da30ec3b31c6ffa913af4d5)) 27 | * add TailwindCSS color palette ([a62d1ca](https://github.com/zzzaim/webcolors/commit/a62d1ca7b037a767db3ae053ccffe92bf43fdee3)) 28 | * drop support for bower ([5a76e37](https://github.com/zzzaim/webcolors/commit/5a76e3774c7cda9aa09f6f592a17f4521b368cc9)) 29 | * palette scripts can now export functions ([81327c0](https://github.com/zzzaim/webcolors/commit/81327c04f77fd00a42fd8665dca20f79c1d52e2f)) 30 | * use colors.css package as source ([9b5f3f7](https://github.com/zzzaim/webcolors/commit/9b5f3f7e75448edc1e33e87691d93de5a5f21a0b)) 31 | * use material-ui-colors package as source ([5a29d16](https://github.com/zzzaim/webcolors/commit/5a29d16b770dced2d54a82951f0db9876bb58be2)) 32 | 33 | 34 | ### Bug Fixes 35 | 36 | * add index.js package.json targets in Makefile ([d0640e2](https://github.com/zzzaim/webcolors/commit/d0640e23b9a0cd0fe30d0ffcb5b21bb9ebc742bc)) 37 | * add missing flatui/*.js files ([0d03b3b](https://github.com/zzzaim/webcolors/commit/0d03b3bf60721965244d2ac7c712c894a75afbd4)) 38 | * add proper color value for material.fuchsia ([d763971](https://github.com/zzzaim/webcolors/commit/d763971f32a502d9e672d678e7f2463d06c2cb69)) 39 | * proper normalization of colors ([047e515](https://github.com/zzzaim/webcolors/commit/047e515a06a4d19f6289e8c19d9694e01ee786c7)) 40 | * require path in bootstrap bulma src ([3a0bfdf](https://github.com/zzzaim/webcolors/commit/3a0bfdf0dc1709253e678de4de4be24b5215e253)) 41 | * syntax error in .eslintrc.js ([23193b2](https://github.com/zzzaim/webcolors/commit/23193b2e616865a45e819f91fc2b43b7eb5eb3b5)) 42 | * use default CSS keywords for undefined colors ([e92a94d](https://github.com/zzzaim/webcolors/commit/e92a94d5ad9072f438dee3dfc9e1fd20897be1b3)) 43 | 44 | 45 | * use make and mustache for build chain ([925ce0e](https://github.com/zzzaim/webcolors/commit/925ce0ea633e6a8998ec23e7a896c5f5ab6861cd)) 46 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2020 Contributors 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a 6 | copy of this software and associated documentation files (the "Software"), 7 | to deal in the Software without restriction, including without limitation 8 | the rights to use, copy, modify, merge, publish, distribute, sublicense, 9 | and/or sell copies of the Software, and to permit persons to whom the 10 | Software is furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included 13 | in all 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 20 | FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER 21 | DEALINGS IN THE SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /Makefile: -------------------------------------------------------------------------------- 1 | js = $(shell find packages -type f -path 'packages/*/src/*.js') 2 | 3 | targets = $(subst /src/,/,$(js)) 4 | targets-json := $(targets:.js=.json) 5 | targets-css := $(targets:.js=.css) 6 | targets-less := $(targets:.js=.less) 7 | targets-scss := $(targets:.js=.scss) 8 | targets-scss := $(targets-scss:index.scss=_index.scss) 9 | targets-styl := $(targets:.js=.styl) 10 | 11 | targets += $(targets-json) 12 | targets += $(targets-css) 13 | targets += $(targets-less) 14 | targets += $(targets-scss) 15 | targets += $(targets-styl) 16 | targets := $(targets) $(targets:packages/%=packages/webcolors/%) 17 | targets += packages/webcolors/index.js 18 | targets += packages/webcolors/README.md 19 | 20 | target-docs += $(wildcard docs/src/images/*.svg) 21 | target-docs += $(wildcard docs/src/*.css) 22 | target-docs += $(wildcard docs/src/*.pug) 23 | target-docs := $(target-docs:docs/src/%=docs/%) 24 | target-docs := $(target-docs:.pug=.html) 25 | 26 | deps-docs = $(wildcard .*rc.js) 27 | deps-docs += $(js) 28 | 29 | define mustache= 30 | npx --no-install mustache $^ > $@ 31 | endef 32 | 33 | define copy= 34 | @mkdir -p $(@D) 35 | cp $< $@ 36 | endef 37 | 38 | define node= 39 | @mkdir -p $(@D) 40 | node $^ > $@ 41 | endef 42 | 43 | define json-recipe= 44 | $(1): tasks/json.js $(dir $(1))src/$(notdir $(1:.json=.js)) 45 | $$(node) 46 | endef 47 | 48 | 49 | all: $(targets) 50 | 51 | clean: 52 | rm -rf .cache 53 | rm -rf $(targets) 54 | 55 | docs: $(target-docs) 56 | 57 | docs/%.html: docs/src/%.pug $(deps-docs) 58 | @mkdir -p $(@D) 59 | doc_dir=$(@D) \ 60 | doc_source=$< \ 61 | doc_output=$@ \ 62 | npx posthtml $< -o $@ 63 | 64 | docs/%.svg: docs/src/%.svg 65 | @mkdir -p $(@D) 66 | npx svgo $< -o $@ 67 | 68 | docs/styles.css: docs/src/styles.css $(deps-docs) 69 | @mkdir -p $(@D) 70 | npx postcss $< -o $@ 71 | 72 | 73 | packages/webcolors/README.md: README.md 74 | cp $< $@ 75 | 76 | packages/webcolors/index.js: tasks/index.js templates/index.js.mustache 77 | $(mustache) 78 | 79 | packages/webcolors/%.json: packages/%.json 80 | $(copy) 81 | 82 | packages/webcolors/%.js: packages/%.js 83 | $(copy) 84 | 85 | packages/webcolors/%.css: packages/%.css 86 | $(copy) 87 | 88 | packages/webcolors/%.less: packages/%.less 89 | $(copy) 90 | 91 | packages/webcolors/%.scss: packages/%.scss 92 | $(copy) 93 | 94 | packages/webcolors/%.styl: packages/%.styl 95 | $(copy) 96 | 97 | 98 | $(foreach f,$(targets-json),$(eval $(call json-recipe,$(f)))) 99 | 100 | packages/%.js: .cache/%.json templates/js.mustache 101 | $(mustache) 102 | 103 | packages/%.css: .cache/%.json templates/css.mustache 104 | $(mustache) 105 | 106 | packages/%.less: .cache/%.json templates/less.mustache 107 | $(mustache) 108 | 109 | packages/%/_index.scss: .cache/%/index.json templates/scss.mustache 110 | $(mustache) 111 | 112 | packages/%.scss: .cache/%.json templates/scss.mustache 113 | $(mustache) 114 | 115 | packages/%.styl: .cache/%.json templates/styl.mustache 116 | $(mustache) 117 | 118 | 119 | .cache/%.json: tasks/view.js packages/%.json 120 | $(node) 121 | 122 | 123 | print-%: 124 | @echo $($*) 125 | 126 | env-%: 127 | @echo $${$*} 128 | 129 | 130 | .PHONY: all docs clean 131 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # webcolors 2 | 3 | [![npm](https://img.shields.io/npm/v/webcolors?style=flat-square)](https://npmjs.com/package/webcolors) 4 | [![npm](https://img.shields.io/npm/dm/webcolors?style=flat-square)](https://npmjs.com/package/webcolors) 5 | [![GitHub](https://img.shields.io/github/license/zzzaim/webcolors?style=flat-square)](LICENSE) 6 | 7 | A collection of color palette packages from popular CSS frameworks. 8 | 9 | ## Palettes 10 | 11 | - **bootstrap**: [getbootstrap.com](https://getbootstrap.com/) 12 | - **bulma**: [bulma.io](https://bulma.io) 13 | - **flatui**: [FlatUI colors](http://flatuicolors.com/) 14 | - **material**: [Google Material Design](https://material.io/design/color/the-color-system.html) 15 | - **mrmrs**: [clrs.cc](http://clrs.cc/) / [mrmrs-colors](https://github.com/mrmrs/colors) 16 | - **tailwind**: [tailwindcss.com](https://tailwindcss.com) 17 | 18 | ## Formats 19 | 20 | - [CSS (custom properties)](#with-css-custom-properties) 21 | - [SCSS](#with-scss) 22 | - [Less](#with-less) 23 | - [Stylus](#with-stylus) 24 | - [JavaScript/JSON](#with-javascript-or-json) 25 | 26 | ## Installation 27 | 28 | ```shell 29 | $ npm install webcolors 30 | ``` 31 | 32 | ### With CSS custom properties 33 | 34 | Use a CSS preprocessor such ass [PostCSS](https://postcss.org) to handle 35 | `@import` syntax. 36 | 37 | ```css 38 | @import "webcolors/material/index.css"; 39 | 40 | body { 41 | color: --red; 42 | background: --yellow; 43 | } 44 | ``` 45 | 46 | ### With SCSS 47 | 48 | Use [sass](https://sass-lang.com) to handle `@import` syntax. The format of 49 | the import file path depends on your configuration. 50 | 51 | ```scss 52 | @import "~webcolors/material/index.css"; 53 | 54 | body { 55 | color: $red; 56 | background: $yellow; 57 | } 58 | ``` 59 | 60 | ### With LESS 61 | 62 | Install and configure [Less.js](http://lesscss.org/). 63 | 64 | ```less 65 | @import "node_modules/webcolors/flatui/index"; 66 | 67 | body { 68 | color: @red; 69 | background: @blue; 70 | } 71 | ``` 72 | 73 | ### With Stylus 74 | 75 | Install and configure [Stylus](https://stylus-lang.com/). 76 | 77 | ```styl 78 | @import "node_modules/webcolors/mrmrs"; 79 | 80 | body { 81 | color: orange; 82 | background: white; 83 | } 84 | ``` 85 | 86 | ### With JavaScript or JSON 87 | 88 | Colors can be imported directly from Node.js scripts or modules. 89 | 90 | ```javascript 91 | // All palettes: 92 | const webcolors = require("webcolors"); 93 | 94 | // Specific palettes: 95 | const bootstrap = require("webcolors/bootstrap"); 96 | const material = require("webcolors/material"); 97 | 98 | console.log(`FlatUI yellow: ${webcolors.flatui.yellow}`); 99 | console.log(`Bootstrap red: ${bootstrap.red}`); 100 | console.log(`Material blue: ${material.blue}`); 101 | ``` 102 | 103 | Palettes pre-exported as JSON files can be found in the package's palette 104 | directories. 105 | 106 | ## Changelog 107 | 108 | **1.2.2** - Fix typo in Material palette for "olive" color. 109 | 110 | **1.2.0** - Add plain, non-number-prefixed Material color aliases, e.g. 111 | `cyan` => `cyan500`, `indigo` => `indigo500`, etc. 112 | 113 | **1.1.0** - All color values are normalized as uppercase hex strings. 114 | 115 | **1.0.0** - Breaking change to directory structure. No more `dist` folder, 116 | individual palettes are available at root directory. 117 | 118 | ## Inspiration 119 | 120 | Inspired by the [material-colors](https://github.com/shuhei/material-colors) 121 | and [mrmrs-colors](https://github.com/mrmrs/colors) packages. 122 | 123 | ## License 124 | 125 | MIT - see [LICENSE](LICENSE) file. 126 | -------------------------------------------------------------------------------- /docs/.docsrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | dev: { 3 | baseURL: "" 4 | }, 5 | live: { 6 | baseURL: "https://zzzaim.github.io/webcolors/" 7 | } 8 | }; 9 | -------------------------------------------------------------------------------- /docs/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zzzaim/webcolors/a739b109562d6721dc129fabcca3fc9f33e19322/docs/favicon.ico -------------------------------------------------------------------------------- /docs/images/dot.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/images/favicon-128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zzzaim/webcolors/a739b109562d6721dc129fabcca3fc9f33e19322/docs/images/favicon-128.png -------------------------------------------------------------------------------- /docs/images/favicon-152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zzzaim/webcolors/a739b109562d6721dc129fabcca3fc9f33e19322/docs/images/favicon-152.png -------------------------------------------------------------------------------- /docs/images/favicon-167.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zzzaim/webcolors/a739b109562d6721dc129fabcca3fc9f33e19322/docs/images/favicon-167.png -------------------------------------------------------------------------------- /docs/images/favicon-180.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zzzaim/webcolors/a739b109562d6721dc129fabcca3fc9f33e19322/docs/images/favicon-180.png -------------------------------------------------------------------------------- /docs/images/favicon-192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zzzaim/webcolors/a739b109562d6721dc129fabcca3fc9f33e19322/docs/images/favicon-192.png -------------------------------------------------------------------------------- /docs/images/favicon-196.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zzzaim/webcolors/a739b109562d6721dc129fabcca3fc9f33e19322/docs/images/favicon-196.png -------------------------------------------------------------------------------- /docs/images/favicon-32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zzzaim/webcolors/a739b109562d6721dc129fabcca3fc9f33e19322/docs/images/favicon-32.png -------------------------------------------------------------------------------- /docs/images/og-square.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zzzaim/webcolors/a739b109562d6721dc129fabcca3fc9f33e19322/docs/images/og-square.png -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | webcolors | all the colors of the web 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 |
27 |
28 |
29 |

webcolors

30 |

31 | A collection of color palette packages from popular 32 | CSS frameworks. 33 |

34 |
35 | 42 |
43 |
44 |
45 |

bootstrap 46 | 47 |

48 |
                49 |
50 |

> npm install @webcolors/bootstrap

51 |
52 |
53 |

bulma 54 | 55 |

56 |
                57 |
58 |

> npm install @webcolors/bulma

59 |
60 |
61 |

flatui 62 | 63 |

64 |
                65 |
66 |

> npm install @webcolors/flatui

67 |
68 |
69 |

material 70 | 71 |

72 |
                73 |
74 |

> npm install @webcolors/material

75 |
76 |
77 |

mrmrs 78 | 79 |

80 |
                81 |
82 |

> npm install @webcolors/mrmrs

83 |
84 |
85 |

tailwind 86 | 87 |

88 |
                89 |
90 |

> npm install @webcolors/tailwind

91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |

What?

99 |

100 | A collection of packages containing default color palettes of 101 | popular CSS frameworks. All palettes are then normalized to use 102 | only CSS Level 2 color keywords (no custom color names). 103 | 104 |

105 |
106 |
107 |

Why?

108 |

109 | By extracting color palettes into separate packages, we can use 110 | any palette on it's own, without being tied to any frameworks. By 111 | using only CSS2 color keywords, we can interchange the palettes 112 | easily. 113 | 114 |

115 |
116 |
117 |

How?

118 |

119 | Once installed, the palettes are available as CSS, 120 | LESS, SCSS and Stylus stylesheets. Configure your stylesheet 121 | pre-processor or parser to enable import of NodeJS modules. 122 | 123 |

124 |
125 |
126 |
127 |
128 |

CSS

129 | 
@import "@webcolors/bootstrap";
130 | 
131 | body {
132 |   background-color: var(--aqua);
133 |   color: var(--blue);
134 | }
135 |
136 |
137 |

LESS

138 | 
@import "@webcolors/bulma";
139 | 
140 | body {
141 |   background-color: @fuchsia;
142 |   color: @gray;
143 | }
144 |
145 |
146 |

SCSS

147 | 
@import "@webcolors/flatui"
148 | 
149 | // Or @use with scope:
150 | @use "@webcolors/material" as material;
151 | @use "@webcolors/mrmrs" as mrmrs;
152 | 
153 | body {
154 |   background-color: material.$green;
155 |   border: 1px solid $lime;
156 |   color: flatui.$maroon;
157 | }
158 |
159 |
160 |

Stylus

161 | 
@import "@webcolors/tailwind"
162 | 
163 | body
164 |   background-color navy
165 |   color olive
166 |
167 |
168 |
169 | 190 | 191 | 192 | 193 | -------------------------------------------------------------------------------- /docs/src/images/dot.svg: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /docs/src/index.pug: -------------------------------------------------------------------------------- 1 | - var github = "https://github.com/zzzaim/webcolors" 2 | - var twitter = "https://twitter.com/zzzaim" 3 | - var faviconSizes = [196, 192, 180, 167, 152, 128, 32] 4 | 5 | mixin navItem 6 | li.text-lg.font-bold(class=attributes.class) 7 | a(href=attributes.href).text-gray-100.hover_text-purple-300 8 | block 9 | 10 | mixin a 11 | a&attributes(attributes).text-purple-700.hover_text-black 12 | block 13 | 14 | mixin icon(src) 15 | icon( 16 | src=`node_modules/@fortawesome/fontawesome-free/svgs/${src}.svg` 17 | )&attributes(attributes) 18 | 19 | mixin codeSample(title) 20 | div.p-4.m-6.bg-white.text-black.rounded.shadow-xl.flex.flex-col 21 | h2.font-bold.mb-3= title 22 | block 23 | 24 | mixin infoBox(title) 25 | div.m-4 26 | h1.font-bold.text-xl.mb-2= title 27 | p 28 | block 29 | 30 | mixin favicon(size) 31 | link( 32 | rel="icon" 33 | href=uri(`images/favicon-${size}.png`) sizes=`${size}x${size}` 34 | ) 35 | 36 | mixin badge(src) 37 | img(src=src).inline-block.mr-2 38 | 39 | doctype html 40 | 41 | html 42 | 43 | head 44 | meta(charset="utf-8") 45 | meta(http-equiv="X-UA-Compatible" content="IE=edge") 46 | meta(name="viewport" content="width=device-width, initial-scale=1") 47 | title webcolors | all the colors of the web 48 | link(rel="stylesheet" href=uri("styles.css")) 49 | link(rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.19.0/themes/prism.min.css") 50 | 51 | for size in faviconSizes 52 | +favicon(size) 53 | 54 | meta(property="og:title" content="webcolors") 55 | meta(property="og:type" content="website") 56 | meta(property="og:description" content="A collection of color palette packages from popular CSS frameworks") 57 | meta(property="og:image" content=uri("images/og-square.png")) 58 | meta(property="og:image:width" content="1200") 59 | meta(property="og:image:height" content="1200") 60 | 61 | body.bg-gray-100 62 | 63 | header.py-20.bg-dark.bg-purple-800.text-gray-100#hero 64 | 65 | div.container.mx-auto 66 | 67 | section.mb-10.px-10.flex.flex-col.md_flex-row.md_items-end 68 | div.mb-4.md_mb-0.md_flex-grow 69 | h1.font-bold.text-3xl webcolors 70 | p.text-lg. 71 | A collection of color palette packages from popular 72 | CSS frameworks. 73 | nav 74 | ul.flex 75 | +navItem(href="#about").mr-4 About 76 | +navItem(href=github).mr-4 GitHub 77 | +navItem(href=twitter).mr-4 Twitter 78 | 79 | section.grid.grid-cols-1.md_grid-cols-3 80 | each info, palette in paletteInfo 81 | div.p-4.m-6.bg-white.text-black.rounded.shadow-xl 82 | h2.mb-4.flex.justify-between.items-baseline 83 | span.font-bold= palette 84 | +a(href=info.homepage).block 85 | +icon("solid/external-link-alt")(width="1rem").fill-current 86 | div.mb-4.grid.grid-cols-5 87 | each color in colors 88 | span(class=`block h-12 bg-${palette}-${color}` title=color). 89 |   90 | p 91 | code > npm install @webcolors/#{palette} 92 | 93 | div.py-20.container.mx-auto#about 94 | 95 | section.px-6.mb-10.text-lg.grid.grid-cols-1.md_grid-cols-3 96 | 97 | +infoBox("What?"). 98 | A collection of packages containing default color palettes of 99 | popular CSS frameworks. All palettes are then normalized to use 100 | only CSS Level 2 color keywords (no custom color names). 101 | 102 | +infoBox("Why?"). 103 | By extracting color palettes into separate packages, we can use 104 | any palette on it's own, without being tied to any frameworks. By 105 | using only CSS2 color keywords, we can interchange the palettes 106 | easily. 107 | 108 | +infoBox("How?"). 109 | Once installed, the palettes are available as CSS, 110 | LESS, SCSS and Stylus stylesheets. Configure your stylesheet 111 | pre-processor or parser to enable import of NodeJS modules. 112 | 113 | section.grid.grid-cols-1.md_grid-cols-2 114 | 115 | +codeSample("CSS") 116 | pre.flex-grow 117 | code.language-css 118 | | @import "@webcolors/bootstrap"; 119 | | 120 | | body { 121 | | background-color: var(--aqua); 122 | | color: var(--blue); 123 | | } 124 | 125 | +codeSample("LESS") 126 | pre.flex-grow 127 | code.language-less 128 | | @import "@webcolors/bulma"; 129 | | 130 | | body { 131 | | background-color: @fuchsia; 132 | | color: @gray; 133 | | } 134 | 135 | +codeSample("SCSS") 136 | pre.flex-grow 137 | code.language-scss 138 | | @import "@webcolors/flatui" 139 | | 140 | | // Or @use with scope: 141 | | @use "@webcolors/material" as material; 142 | | @use "@webcolors/mrmrs" as mrmrs; 143 | | 144 | | body { 145 | | background-color: material.$green; 146 | | border: 1px solid $lime; 147 | | color: flatui.$maroon; 148 | | } 149 | 150 | +codeSample("Stylus") 151 | pre.flex-grow 152 | code.language-stylus 153 | | @import "@webcolors/tailwind" 154 | | 155 | | body 156 | | background-color navy 157 | | color olive 158 | 159 | footer.py-20.bg-light.bg-gray-400.text-gray-800 160 | 161 | div.px-10.container.mx-auto.text-sm.flex.flex-col.md_flex-row.justify-between.text-center.md_text-left 162 | 163 | div.order-last 164 | p.mb-4 165 | | Made with ♥ by 166 | | 167 | +a(href=twitter) @zzzaim 168 | p.mb-4. 169 | Copyright © 2020 Zaim Bakar and Contributors. 170 | p 171 | +badge("https://img.shields.io/npm/v/webcolors?style=flat-square") 172 | +badge("https://img.shields.io/npm/dm/webcolors?style=flat-square") 173 | +badge("https://img.shields.io/github/license/zzzaim/webcolors?style=flat-square") 174 | 175 | 176 | ul.mb-4.font-bold.flex.justify-center.md_flex-col 177 | li.mr-2.md_mb-2 178 | +a(href="#about") About 179 | li.mr-2.md_mb-2 180 | +a(href=github) GitHub 181 | li.mr-2.md_mb-2 182 | +a(href=twitter) Twitter 183 | 184 | script(src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.19.0/components/prism-core.min.js") 185 | script(src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.19.0/plugins/autoloader/prism-autoloader.min.js") 186 | -------------------------------------------------------------------------------- /docs/src/styles.css: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | 3 | @import url("https://fonts.googleapis.com/css?family=Roboto+Mono|Rubik:400,700&display=swap"); 4 | 5 | @tailwind base; 6 | @tailwind components; 7 | @tailwind utilities; 8 | 9 | html { 10 | font-family: Rubik, sans-serif; 11 | } 12 | 13 | code, 14 | pre { 15 | font-family: "Roboto Mono", monospace; 16 | } 17 | 18 | #hero { 19 | background-image: url("./images/dot.svg"); 20 | background-size: 68px 68px; 21 | background-blend-mode: overlay; 22 | } 23 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webcolors", 3 | "version": "2.0.1", 4 | "description": "Color palettes", 5 | "license": "MIT", 6 | "private": true, 7 | "author": { 8 | "name": "Zaim Bakar", 9 | "url": "https://zbr.works" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "https://github.com/zzzaim/webcolors.git" 14 | }, 15 | "scripts": { 16 | "test": "true", 17 | "build": "make", 18 | "start": "tasks/serve.sh", 19 | "release": "standard-version -a" 20 | }, 21 | "devDependencies": { 22 | "@fortawesome/fontawesome-free": "^5.12.1", 23 | "autoprefixer": "^9.7.4", 24 | "bootstrap": "^4.4.1", 25 | "bulma": "^0.8.0", 26 | "chai": "^4.2.0", 27 | "color": "^3.1.2", 28 | "colors.css": "^3.0.0", 29 | "eslint": "^6.8.0", 30 | "eslint-config-prettier": "^6.10.0", 31 | "eslint-plugin-prettier": "^3.1.2", 32 | "husky": "^4.2.3", 33 | "material-ui-colors": "^1.0.0", 34 | "minimist": "^1.2.2", 35 | "mocha": "^7.0.1", 36 | "mustache": "^4.0.0", 37 | "onchange": "^6.1.0", 38 | "parse-author": "^2.0.0", 39 | "postcss": "^7.0.27", 40 | "postcss-cli": "^7.1.0", 41 | "postcss-export-custom-variables": "^1.0.0", 42 | "postcss-get-sass-variables": "^1.1.0", 43 | "postcss-sass": "^0.4.2", 44 | "posthtml": "^0.12.0", 45 | "posthtml-cli": "^0.5.4", 46 | "posthtml-inline-svg": "^0.1.0", 47 | "posthtml-pug": "^1.0.2", 48 | "prettier": "^1.19.1", 49 | "reload": "^3.0.4", 50 | "sass": "^1.26.1", 51 | "standard-version": "^7.1.0", 52 | "svgo": "^1.3.2", 53 | "tailwindcss": "^1.2.0" 54 | }, 55 | "husky": { 56 | "hooks": { 57 | "pre-commit": "npm test", 58 | "pre-push": "npm test" 59 | } 60 | }, 61 | "standard-version": { 62 | "scripts": { 63 | "prerelease": "make", 64 | "postbump": "node tasks/version", 65 | "precommit": "git add packages" 66 | } 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /packages/bootstrap/LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2020 Contributors 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a 6 | copy of this software and associated documentation files (the "Software"), 7 | to deal in the Software without restriction, including without limitation 8 | the rights to use, copy, modify, merge, publish, distribute, sublicense, 9 | and/or sell copies of the Software, and to permit persons to whom the 10 | Software is furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included 13 | in all 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 20 | FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER 21 | DEALINGS IN THE SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /packages/bootstrap/README.md: -------------------------------------------------------------------------------- 1 | # `@webcolors/bootstrap` 2 | 3 | See https://github.com/zzzaim/webcolors#readme 4 | -------------------------------------------------------------------------------- /packages/bootstrap/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@webcolors/bootstrap", 3 | "description": "Bootstrap color palette", 4 | "version": "2.0.1", 5 | "license": "MIT", 6 | "author": { 7 | "name": "Zaim Bakar", 8 | "url": "https://zbr.works)" 9 | }, 10 | "contributors": [ 11 | { 12 | "name": "The Bootstrap Authors", 13 | "url": "https://github.com/twbs/bootstrap/graphs/contributors" 14 | } 15 | ], 16 | "homepage": "https://github.com/zzzaim/webcolors", 17 | "bugs": "https://github.com/zzzaim/webcolors/issues", 18 | "repository": { 19 | "type": "git", 20 | "url": "https://github.com/zzzaim/webcolors.git", 21 | "directory": "packages/bootstrap" 22 | }, 23 | "files": [ 24 | "*.js", 25 | "*.json", 26 | "*.css", 27 | "*.less", 28 | "*.scss", 29 | "*.styl" 30 | ], 31 | "webcolors": { 32 | "homepage": "https://getbootstrap.com" 33 | } 34 | } -------------------------------------------------------------------------------- /packages/bootstrap/src/index.js: -------------------------------------------------------------------------------- 1 | const sass = require("sass"); 2 | const exportVariables = require("postcss-export-custom-variables"); 3 | const { colorKeysOnly } = require("../../../tasks/util"); 4 | 5 | const options = { 6 | from: require.resolve("bootstrap/scss/bootstrap.scss"), 7 | to: "bootstrap.css" 8 | }; 9 | 10 | module.exports = function() { 11 | const result = sass.renderSync({ 12 | file: options.from 13 | }); 14 | 15 | const variables = {}; 16 | 17 | return exportVariables 18 | .process(result.css.toString(), options, { exporter, variables }) 19 | .then(() => colorKeysOnly(variables)); 20 | }; 21 | 22 | function exporter() { 23 | return Promise.resolve(); 24 | } 25 | 26 | // For debugging: run this script to output variables 27 | if (require.main === module) { 28 | module 29 | .exports() 30 | .then(console.log) 31 | .catch(console.err); 32 | } 33 | -------------------------------------------------------------------------------- /packages/bulma/LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2020 Contributors 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a 6 | copy of this software and associated documentation files (the "Software"), 7 | to deal in the Software without restriction, including without limitation 8 | the rights to use, copy, modify, merge, publish, distribute, sublicense, 9 | and/or sell copies of the Software, and to permit persons to whom the 10 | Software is furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included 13 | in all 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 20 | FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER 21 | DEALINGS IN THE SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /packages/bulma/README.md: -------------------------------------------------------------------------------- 1 | # `@webcolors/bulma` 2 | 3 | See https://github.com/zzzaim/webcolors#readme 4 | -------------------------------------------------------------------------------- /packages/bulma/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@webcolors/bulma", 3 | "description": "Bulma color palette", 4 | "version": "2.0.1", 5 | "license": "MIT", 6 | "author": { 7 | "name": "Zaim Bakar", 8 | "url": "https://zbr.works)" 9 | }, 10 | "contributors": [ 11 | { 12 | "name": "Jeremy Thomas", 13 | "email": "bbxdesign@gmail.com", 14 | "url": "https://jgthms.com" 15 | } 16 | ], 17 | "homepage": "https://github.com/zzzaim/webcolors", 18 | "bugs": "https://github.com/zzzaim/webcolors/issues", 19 | "repository": { 20 | "type": "git", 21 | "url": "https://github.com/zzzaim/webcolors.git", 22 | "directory": "packages/bulma" 23 | }, 24 | "files": [ 25 | "*.js", 26 | "*.json", 27 | "*.css", 28 | "*.less", 29 | "*.scss", 30 | "*.styl" 31 | ], 32 | "webcolors": { 33 | "homepage": "https://bulma.io" 34 | } 35 | } -------------------------------------------------------------------------------- /packages/bulma/src/index.js: -------------------------------------------------------------------------------- 1 | const Fs = require("fs"); 2 | const postcss = require("postcss"); 3 | const sass = require("postcss-sass"); 4 | const getVariables = require("postcss-get-sass-variables"); 5 | const { colorKeysOnly } = require("../../../tasks/util"); 6 | 7 | const bulma = require.resolve("bulma/sass/utilities/initial-variables.sass"); 8 | const css = Fs.readFileSync(bulma, "utf-8"); 9 | 10 | const options = { 11 | from: bulma, 12 | to: "bulma.css", 13 | syntax: sass 14 | }; 15 | 16 | module.exports = function() { 17 | const variables = {}; 18 | 19 | return postcss([ 20 | getVariables(vars => { 21 | Object.assign(variables, vars); 22 | }) 23 | ]) 24 | .process(css, options) 25 | .then(() => fixValues(colorKeysOnly(variables))); 26 | }; 27 | 28 | // Remove SCSS syntax from values 29 | function fixValue(str) { 30 | return str.replace(/\s*!default;?$/, ""); 31 | } 32 | 33 | function fixValues(map) { 34 | for (let [k, v] of map) { 35 | map.set(k, fixValue(v)); 36 | } 37 | return map; 38 | } 39 | 40 | // For debugging: run this script to output variables 41 | if (require.main === module) { 42 | module 43 | .exports() 44 | .then(console.log) 45 | .catch(console.err); 46 | } 47 | -------------------------------------------------------------------------------- /packages/flatui/LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2020 Contributors 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a 6 | copy of this software and associated documentation files (the "Software"), 7 | to deal in the Software without restriction, including without limitation 8 | the rights to use, copy, modify, merge, publish, distribute, sublicense, 9 | and/or sell copies of the Software, and to permit persons to whom the 10 | Software is furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included 13 | in all 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 20 | FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER 21 | DEALINGS IN THE SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /packages/flatui/README.md: -------------------------------------------------------------------------------- 1 | # `@webcolors/flatui` 2 | 3 | See https://github.com/zzzaim/webcolors#readme 4 | -------------------------------------------------------------------------------- /packages/flatui/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@webcolors/flatui", 3 | "description": "FlatUI color palette", 4 | "version": "2.0.1", 5 | "license": "MIT", 6 | "author": { 7 | "name": "Zaim Bakar", 8 | "url": "https://zbr.works)" 9 | }, 10 | "contributors": [ 11 | "Kevin Yang (http://dribbble.com/eatsleepvector)", 12 | "Kate Hoolahan (http://dribbble.com/hoolah)", 13 | "Jan Losert (http://dribbble.com/janlosert)", 14 | "Dmitri Litvinov (http://dribbble.com/dmitrilitvinov)", 15 | "Wenjun (http://dribbble.com/wenjunliao)", 16 | "Jeroen Van Eerden (http://dribbble.com/jeroenvaneerden)", 17 | "Léa Poisson (http://dribbble.com/goldfishlife)", 18 | "Martin David (http://dribbble.com/srioz)", 19 | "Ranganath Krishnamani (http://dribbble.com/rkrishnamani)", 20 | "Alexander Zaytsev (http://dribbble.com/anwaltzzz)", 21 | "Miguel Camacho (http://dribbble.com/miguelcm)", 22 | "Jesper Dahlqvist (http://dribbble.com/yehsper)", 23 | "Tamer Köseli (http://dribbble.com/tamerkoseli)" 24 | ], 25 | "homepage": "https://github.com/zzzaim/webcolors", 26 | "bugs": "https://github.com/zzzaim/webcolors/issues", 27 | "repository": { 28 | "type": "git", 29 | "url": "https://github.com/zzzaim/webcolors.git", 30 | "directory": "packages/flatui" 31 | }, 32 | "files": [ 33 | "*.js", 34 | "*.json", 35 | "*.css", 36 | "*.less", 37 | "*.scss", 38 | "*.styl" 39 | ], 40 | "webcolors": { 41 | "homepage": "https://flatuicolors.com" 42 | } 43 | } -------------------------------------------------------------------------------- /packages/flatui/src/american.js: -------------------------------------------------------------------------------- 1 | // Palette's specially-named colors: 2 | const named = { 3 | americanRiver: `#636e72`, 4 | brightYarrow: `#fdcb6e`, 5 | chiGong: `#d63031`, 6 | cityLights: `#dfe6e9`, 7 | draculaOrchid: `#2d3436`, 8 | electronBlue: `#0984e3`, 9 | exodusFruit: `#6c5ce7`, 10 | fadedPoster: `#81ecec`, 11 | firstDate: `#fab1a0`, 12 | greenDarnerTail: `#74b9ff`, 13 | lightGreenishBlue: `#55efc4`, 14 | mintLeaf: `#00b894`, 15 | orangeVille: `#e17055`, 16 | pico8Pink: `#fd79a8`, 17 | pinkGlamour: `#ff7675`, 18 | prunusAvium: `#e84393`, 19 | robinsEggBlue: `#00cec9`, 20 | shyMoment: `#a29bfe`, 21 | soothingBreeze: `#b2bec3`, 22 | sourLemon: `#ffeaa7` 23 | }; 24 | 25 | // Map of the above specially-named colors to its equivalent CSS2 color: 26 | const css = { 27 | aqua: named.fadedPoster, 28 | black: named.draculaOrchid, 29 | blue: named.greenDarnerTail, 30 | fuchsia: named.prunusAvium, 31 | gray: named.americanRiver, 32 | green: named.mintLeaf, 33 | lime: named.robinsEggBlue, 34 | maroon: named.chiGong, 35 | navy: named.electronBlue, 36 | olive: named.brightYarrow, 37 | orange: named.orangeVille, 38 | purple: named.exodusFruit, 39 | red: named.pinkGlamour, 40 | silver: named.soothingBreeze, 41 | teal: named.lightGreenishBlue, 42 | white: named.cityLights, 43 | yellow: named.sourLemon 44 | }; 45 | 46 | module.exports = { 47 | ...named, 48 | ...css 49 | }; 50 | 51 | // Palette name, description and author: 52 | Object.defineProperty(module.exports, "meta", { 53 | value: { 54 | name: "flatui/american", 55 | description: "Flat UI American Palette", 56 | author: "Kevin Yang (http://dribbble.com/eatsleepvector)" 57 | } 58 | }); 59 | -------------------------------------------------------------------------------- /packages/flatui/src/aussie.js: -------------------------------------------------------------------------------- 1 | // Palette's specially-named colors: 2 | const named = { 3 | beekeeper: "#f6e58d", 4 | blurple: "#4834d4", 5 | carminePink: "#eb4d4b", 6 | coastalBreeze: "#dff9fb", 7 | deepCove: "#130f40", 8 | deepKoamaru: "#30336b", 9 | exodusFruit: "#686de0", 10 | greenlandGreen: "#22a6b3", 11 | heliotrope: "#e056fd", 12 | hintOfIcePack: "#c7ecee", 13 | juneBud: "#badc58", 14 | middleBlue: "#7ed6df", 15 | pinkGlamour: "#ff7979", 16 | pureApple: "#6ab04c", 17 | quinceJelly: "#f0932b", 18 | soaringEagle: "#95afc0", 19 | spicedNectarine: "#ffbe76", 20 | steelPink: "#be2edd", 21 | turbo: "#f9ca24", 22 | wizardGrey: "#535c68" 23 | }; 24 | 25 | // Map of the above specially-named colors to its equivalent CSS2 color: 26 | const css = { 27 | aqua: named.middleBlue, 28 | black: null, 29 | blue: named.blurple, 30 | fuchsia: named.heliotrope, 31 | gray: named.soaringEagle, 32 | green: named.pureApple, 33 | lime: named.juneBud, 34 | maroon: named.carminePink, 35 | navy: named.deepCove, 36 | olive: named.quinceJelly, 37 | orange: named.turbo, 38 | purple: named.steelPink, 39 | red: named.pinkGlamour, 40 | silver: named.hintOfIcePack, 41 | teal: named.lightGreenishBlue, 42 | white: named.coastalBreeze, 43 | yellow: named.beekeeper 44 | }; 45 | 46 | module.exports = { 47 | ...named, 48 | ...css 49 | }; 50 | 51 | // Palette name, description and author: 52 | Object.defineProperty(module.exports, "meta", { 53 | value: { 54 | name: "flatui/aussie", 55 | description: "Flat UI Aussie Palette", 56 | author: "Kate Hoolahan (http://dribbble.com/hoolah)" 57 | } 58 | }); 59 | -------------------------------------------------------------------------------- /packages/flatui/src/british.js: -------------------------------------------------------------------------------- 1 | // Palette's specially-named colors: 2 | const named = { 3 | blueNights: "#273c75", 4 | blueberrySoda: "#f5f6fa", 5 | chainGangGrey: "#dcdde1", 6 | downloadProgress: "#fbc531", 7 | electromagnetic: "#192a56", 8 | harleyDavidsonOrange: "#353b48", 9 | hintOfPensive: "#c23616", 10 | lynxWhite: "#e84118", 11 | mattPurple: "#0097e6", 12 | mazarineBlue: "#7f8fa6", 13 | nanohanachaGold: "#8c7ae6", 14 | nasturcianFlower: "#40739e", 15 | naval: "#44bd32", 16 | periwinkle: "#9c88ff", 17 | picoVoid: "#718093", 18 | protossPylon: "#00a8ff", 19 | riseNShine: "#9c88ff", 20 | seabrook: "#4cd137", 21 | skirretGreen: "#e1b12c", 22 | vanadylBlue: "#487eb0" 23 | }; 24 | 25 | // Map of the above specially-named colors to its equivalent CSS2 color: 26 | const css = { 27 | aqua: named.protossPylon, 28 | black: named.electromagnetic, 29 | blue: named.vanadylBlue, 30 | fuchsia: named.heliotrope, 31 | gray: named.chainGangGrey, 32 | green: named.skirretGreen, 33 | lime: named.downloadProgress, 34 | maroon: named.harleyDavidsonOrange, 35 | navy: named.mazarineBlue, 36 | olive: null, 37 | orange: named.nanohanachaGold, 38 | purple: named.mattPurple, 39 | red: named.nasturcianFlower, 40 | silver: named.hintOfPensive, 41 | teal: named.skirretGreen, 42 | white: named.lynxWhite, 43 | yellow: named.riseNShine 44 | }; 45 | 46 | module.exports = { 47 | ...named, 48 | ...css 49 | }; 50 | 51 | // Palette name, description and author: 52 | Object.defineProperty(module.exports, "meta", { 53 | value: { 54 | name: "flatui/british", 55 | description: "Flat UI British Palette", 56 | author: "Jan Losert (http://dribbble.com/janlosert)" 57 | } 58 | }); 59 | -------------------------------------------------------------------------------- /packages/flatui/src/canadian.js: -------------------------------------------------------------------------------- 1 | // Palette's specially-named colors: 2 | const named = { 3 | amour: "#ee5253", 4 | aquaVelvet: "#01a3a4", 5 | bleuDeFrance: "#2e86de", 6 | bluebell: "#341f97", 7 | casandoraYellow: "#ff9ff3", 8 | cyanite: "#0abde3", 9 | darkMountainMeadow: "#ee5253", 10 | doubleDragonSkin: "#0abde3", 11 | fuelTown: "#576574", 12 | imperialPrimer: "#222f3e", 13 | jadeDust: "#00d2d3", 14 | jigglyPuff: "#ff6b6b", 15 | joustBlue: "#54a0ff", 16 | lianHongLotusPink: "#0abde3", 17 | lightBlueBallerina: "#c8d6e5", 18 | megaman: "#ff6b6b", 19 | nasuPurple: "#5f27cd", 20 | pastelRed: "#feca57", 21 | stormPetrel: "#8395a7", 22 | wildCaribbeanGreen: "#48dbfb" 23 | }; 24 | 25 | // Map of the above specially-named colors to its equivalent CSS2 color: 26 | const css = { 27 | aqua: named.megaman, 28 | black: named.imperialPrimer, 29 | blue: named.bleuDeFrance, 30 | fuchsia: named.lianHongLotusPink, 31 | gray: named.stormPetrel, 32 | green: named.darkMountainMeadow, 33 | lime: named.wildCaribbeanGreen, 34 | maroon: named.amour, 35 | navy: named.bluebell, 36 | olive: null, 37 | orange: named.doubleDragonSkin, 38 | purple: named.nasuPurple, 39 | red: named.pastelRed, 40 | silver: named.lightBlueBallerina, 41 | teal: named.aquaVelvet, 42 | white: null, 43 | yellow: named.casandoraYellow 44 | }; 45 | 46 | module.exports = { 47 | ...named, 48 | ...css 49 | }; 50 | 51 | // Palette name, description and author: 52 | Object.defineProperty(module.exports, "meta", { 53 | value: { 54 | name: "flatui/canadian", 55 | description: "Flat UI Canadian Palette", 56 | author: "Dmitri Litvinov (http://dribbble.com/dmitrilitvinov)" 57 | } 58 | }); 59 | -------------------------------------------------------------------------------- /packages/flatui/src/chinese.js: -------------------------------------------------------------------------------- 1 | // Palette's specially-named colors: 2 | const named = { 3 | antiFlashWhite: "#f1f2f6", 4 | bayWharf: "#747d8c", 5 | brightGreek: "#3742fa", 6 | bruschettaTomato: "#ff6348", 7 | cityLights: "#dfe4ea", 8 | clearChill: "#1e90ff", 9 | coral: "#ff7f50", 10 | frenchSkyBlue: "#70a1ff", 11 | goldenSand: "#eccc68", 12 | grisaille: "#57606f", 13 | limeSoap: "#7bed9f", 14 | orange: "#ffa502", 15 | peace: "#a4b0be", 16 | prestigeBlue: "#2f3542", 17 | saturatedSky: "#5352ed", 18 | twinkleBlue: "#ced6e0", 19 | ufoGreen: "#2ed573", 20 | watermelon: "#ff4757", 21 | white: "#ffffff", 22 | wildWatermelon: "#ff6b81" 23 | }; 24 | 25 | // Map of the above specially-named colors to its equivalent CSS2 color: 26 | const css = { 27 | aqua: named.clearChill, 28 | black: named.prestigeBlue, 29 | blue: named.frenchSkyBlue, 30 | fuchsia: null, 31 | gray: named.bayWharf, 32 | green: named.ufoGreen, 33 | lime: named.limeSoap, 34 | maroon: named.watermelon, 35 | navy: named.brightGreek, 36 | olive: null, 37 | orange: named.orange, 38 | purple: named.saturatedSky, 39 | red: named.wildWatermelon, 40 | silver: named.peace, 41 | teal: named.ufoGreen, 42 | white: named.white, 43 | yellow: named.goldenSand 44 | }; 45 | 46 | module.exports = { 47 | ...named, 48 | ...css 49 | }; 50 | 51 | // Palette name, description and author: 52 | Object.defineProperty(module.exports, "meta", { 53 | value: { 54 | name: "flatui/chinese", 55 | description: "Flat UI Chinese Palette", 56 | author: "Wenjun (http://dribbble.com/wenjunliao)" 57 | } 58 | }); 59 | -------------------------------------------------------------------------------- /packages/flatui/src/dutch.js: -------------------------------------------------------------------------------- 1 | // Palette's specially-named colors: 2 | const named = { 3 | androidGreen: "#A3CB38", 4 | baraRed: "#ED4C67", 5 | blueMartina: "#12CBC4", 6 | circumorbitalRign: "#5758BB", 7 | energos: "#C4E538", 8 | forgottenPurple: "#9980FA", 9 | hollyhock: "#833471", 10 | lavenderRose: "#FDA7DF", 11 | lavenderTea: "#D980FA", 12 | magentaPurple: "#5758BB", 13 | mediterraneanSea: "#1289A7", 14 | merchantMarineBlue: "#0652DD", 15 | pixelatedGrass: "#009432", 16 | puffinsBill: "#EE5A24", 17 | radiantYellow: "#F79F1F", 18 | redPigment: "#EA2027", 19 | sunflower: "#FFC312", 20 | turkishAqua: "#006266", 21 | twentyThousandLeaguesUnderTheSea: "#1B1464", 22 | veryBerry: "#B53471" 23 | }; 24 | 25 | // Map of the above specially-named colors to its equivalent CSS2: 26 | const css = { 27 | aqua: named.blueMartina, 28 | black: null, 29 | blue: named.merchantMarineBlue, 30 | fuchsia: named.lavenderTea, 31 | gray: null, 32 | green: named.pixelatedGrass, 33 | lime: named.androidGreen, 34 | maroon: named.magentaPurple, 35 | navy: named.twentyThousandLeaguesUnderTheSea, 36 | olive: null, 37 | orange: named.puffinsBill, 38 | purple: named.veryBerry, 39 | red: named.redPigment, 40 | silver: null, 41 | teal: named.turkishAqua, 42 | white: null, 43 | yellow: named.sunflower 44 | }; 45 | 46 | module.exports = { 47 | ...named, 48 | ...css 49 | }; 50 | 51 | // Palette name, description and author: 52 | Object.defineProperty(module.exports, "meta", { 53 | value: { 54 | name: "flatui/dutch", 55 | description: "Flat UI Dutch Palette", 56 | author: "Jeroen Van Eerden (http://dribbble.com/jeroenvaneerden)" 57 | } 58 | }); 59 | -------------------------------------------------------------------------------- /packages/flatui/src/french.js: -------------------------------------------------------------------------------- 1 | // Palette's specially-named colors: 2 | const named = { 3 | auroraGreen: "#78e08f", 4 | azraqBlue: "#4a69bd", 5 | carrotOrange: "#e58e26", 6 | darkSapphire: "#0c2461", 7 | dupain: "#60a3bc", 8 | flatFresh: "#fad390", 9 | forestBlues: "#0a3d62", 10 | goodSamaritan: "#3c6382", 11 | icelandPoppy: "#fa983a", 12 | jalapenoRed: "#b71540", 13 | livid: "#6a89cc", 14 | mandarinRed: "#e55039", 15 | melonMelody: "#f8c291", 16 | paradiseGreen: "#b8e994", 17 | reefEncounter: "#079992", 18 | spray: "#82ccdd", 19 | squashBlossom: "#f6b93b", 20 | tomatoRed: "#eb2f06", 21 | waterfall: "#38ada9", 22 | yueGuangLanBlue: "#1e3799" 23 | }; 24 | 25 | // Map of the above specially-named colors to its equivalent CSS2: 26 | const css = { 27 | aqua: named.spray, 28 | black: null, 29 | blue: named.yueGuangLanBlue, 30 | fuchsia: null, 31 | gray: null, 32 | green: named.auroraGreen, 33 | lime: named.paradiseGreen, 34 | maroon: named.jalapenoRed, 35 | navy: named.darkSapphire, 36 | olive: named.carrotOrange, 37 | orange: named.icelandPoppy, 38 | purple: null, 39 | red: named.tomatoRed, 40 | silver: null, 41 | teal: named.reefEncounter, 42 | white: null, 43 | yellow: named.squashBlossom 44 | }; 45 | 46 | module.exports = { 47 | ...named, 48 | ...css 49 | }; 50 | 51 | // Palette name, description and author: 52 | Object.defineProperty(module.exports, "meta", { 53 | value: { 54 | name: "flatui/french", 55 | description: "Flat UI French Palette", 56 | author: "Léa Poisson (http://dribbble.com/goldfishlife)" 57 | } 58 | }); 59 | -------------------------------------------------------------------------------- /packages/flatui/src/german.js: -------------------------------------------------------------------------------- 1 | // Palette's specially-named colors: 2 | const named = { 3 | algalFuel: "#20bf6b", 4 | beniukonBronze: "#fa8231", 5 | blueGrey: "#778ca3", 6 | blueHorizon: "#4b6584", 7 | boyzone: "#2d98da", 8 | c64NTSC: "#4b7bec", 9 | desire: "#eb3b5a", 10 | flirtatious: "#fed330", 11 | fusionRed: "#fc5c65", 12 | gloomyPurple: "#8854d0", 13 | highBlue: "#45aaf2", 14 | innuendo: "#a5b1c2", 15 | lighterPurple: "#a55eea", 16 | maximumBlueGreen: "#2bcbba", 17 | nycTaxi: "#f7b731", 18 | orangeHibiscus: "#fd9644", 19 | reptileGreen: "#26de81", 20 | royalBlue: "#3867d6", 21 | turquoiseTopaz: "#0fb9b1", 22 | twinkleBlue: "#d1d8e0" 23 | }; 24 | 25 | // Map of the above specially-named colors to its equivalent CSS2: 26 | const css = { 27 | aqua: named.highBlue, 28 | black: null, 29 | blue: named.c64NTSC, 30 | fuchsia: named.lighterPurple, 31 | gray: named.blueGrey, 32 | green: named.algalFuel, 33 | lime: named.reptileGreen, 34 | maroon: named.desire, 35 | navy: named.royalBlue, 36 | olive: named.beniukonBronze, 37 | orange: named.orangeHibiscus, 38 | purple: named.gloomyPurple, 39 | red: named.fusionRed, 40 | silver: named.innuendo, 41 | teal: named.turquoiseTopaz, 42 | white: null, 43 | yellow: named.flirtatious 44 | }; 45 | 46 | module.exports = { 47 | ...named, 48 | ...css 49 | }; 50 | 51 | // Palette name, description and author: 52 | Object.defineProperty(module.exports, "meta", { 53 | value: { 54 | name: "flatui/german", 55 | description: "Flat UI German Palette", 56 | author: "Martin David (http://dribbble.com/srioz)" 57 | } 58 | }); 59 | -------------------------------------------------------------------------------- /packages/flatui/src/index.js: -------------------------------------------------------------------------------- 1 | // Flat-UI color names 2 | var colors = { 3 | turquoise: "#1abc9c", 4 | greenSea: "#16a085", 5 | emerald: "#2ecc71", 6 | nephritis: "#27ae60", 7 | peterRiver: "#3498db", 8 | belizeHole: "#2980b9", 9 | wetAsphalt: "#34495e", 10 | midnightBlue: "#2c3e50", 11 | amethyst: "#9b59b6", 12 | wisteria: "#8e44ad", 13 | sunFlower: "#f1c40f", 14 | orange: "#f39c12", 15 | carrot: "#e67e22", 16 | pumpkin: "#d35400", 17 | alizarin: "#e74c3c", 18 | pomegranate: "#c0392b", 19 | clouds: "#ecf0f1", 20 | silver: "#bdc3c7", 21 | concrete: "#95a5a6", 22 | asbestos: "#7f8c8d" 23 | }; 24 | 25 | // CSS color names 26 | colors.aqua = colors.peterRiver; 27 | colors.blue = colors.belizeHole; 28 | colors.lime = colors.emerald; 29 | colors.navy = colors.midnightBlue; 30 | colors.teal = colors.greenSea; 31 | colors.green = colors.nephritis; 32 | colors.red = colors.pomegranate; 33 | colors.purple = colors.wisteria; 34 | colors.yellow = colors.sunFlower; 35 | colors.fuchsia = colors.amethyst; 36 | colors.gray = colors.concrete; 37 | 38 | // Not defined, will fall back to "defaults" palette 39 | //colors.maroon = null; 40 | //colors.olive = null; 41 | //colors.white = null; 42 | //colors.black = null; 43 | 44 | module.exports = colors; 45 | 46 | // For debugging: run this script to output variables 47 | if (require.main === module) { 48 | console.log(module.exports); 49 | } 50 | -------------------------------------------------------------------------------- /packages/flatui/src/indian.js: -------------------------------------------------------------------------------- 1 | // Palette's specially-named colors: 2 | const named = { 3 | bluebell: "#3B3B98", 4 | brightUbe: "#D6A2E8", 5 | clearChill: "#1B9CFC", 6 | endingNavyBlue: "#182C61", 7 | fallingStar: "#CAD3C8", 8 | fieryFuchsia: "#B33771", 9 | georgiaPeach: "#FD7272", 10 | highlighterLavender: "#82589F", 11 | honeyGlow: "#25CCF7", 12 | keppel: "#58B19F", 13 | magentaPurple: "#6D214F", 14 | oasisStream: "#9AECDB", 15 | orchidOrange: "#FEA47F", 16 | pineGlade: "#BDC581", 17 | richGardenia: "#F97F51", 18 | sarawakWhitePepper: "#F8EFBA", 19 | sasquatchSocks: "#FC427B", 20 | shipsOfficer: "#2C3A47", 21 | spiroDiscoBall: "#25CCF7", 22 | sweetGarden: "#55E6C1" 23 | }; 24 | 25 | // Map of the above specially-named colors to its equivalent CSS2 color: 26 | const css = { 27 | aqua: named.spiroDiscoBall, 28 | black: named.shipsOfficer, 29 | blue: named.clearChill, 30 | fuchsia: named.fieryFuchsia, 31 | gray: named.fallingStar, 32 | green: named.keppel, 33 | lime: named.sweetGarden, 34 | maroon: named.desire, 35 | navy: named.endingNavyBlue, 36 | olive: named.honeyGlow, 37 | orange: named.richGardenia, 38 | purple: named.magentaPurple, 39 | red: named.sasquatchSocks, 40 | silver: named.fallingStar, 41 | teal: named.keppel, 42 | white: null, 43 | yellow: null 44 | }; 45 | 46 | module.exports = { 47 | ...named, 48 | ...css 49 | }; 50 | 51 | // Palette name, description and author: 52 | Object.defineProperty(module.exports, "meta", { 53 | value: { 54 | name: "flatui/indian", 55 | description: "Flat UI Indian Palette", 56 | author: "Ranganath Krishnamani (http://dribbble.com/rkrishnamani)" 57 | } 58 | }); 59 | -------------------------------------------------------------------------------- /packages/flatui/src/russian.js: -------------------------------------------------------------------------------- 1 | // Palette's specially-named colors: 2 | const named = { 3 | appleValley: "#ea8685", 4 | biscay: "#303952", 5 | blueCuracao: "#3dc1d3", 6 | brewedMustard: "#e77f67", 7 | cornflower: "#546de5", 8 | creamyPeach: "#f3a683", 9 | deepRose: "#c44569", 10 | flamingoPink: "#f78fb3", 11 | oldGeranium: "#cf6a87", 12 | pencilLead: "#596275", 13 | porcelainRose: "#e66767", 14 | purpleCorallite: "#574b90", 15 | purpleMountainMajesty: "#786fa6", 16 | roguePink: "#f8a5c2", 17 | rosyHighlight: "#f7d794", 18 | sawtoothAak: "#f19066", 19 | softBlue: "#778beb", 20 | squeaky: "#63cdda", 21 | summertime: "#f5cd79", 22 | tigerlily: "#e15f41" 23 | }; 24 | 25 | // Map of the above specially-named colors to its equivalent CSS2 color: 26 | const css = { 27 | aqua: named.spiroDiscoBall, 28 | black: named.shipsOfficer, 29 | blue: named.clearChill, 30 | fuchsia: named.fieryFuchsia, 31 | gray: named.fallingStar, 32 | green: named.keppel, 33 | lime: named.sweetGarden, 34 | maroon: named.desire, 35 | navy: named.endingNavyBlue, 36 | olive: named.honeyGlow, 37 | orange: named.richGardenia, 38 | purple: named.magentaPurple, 39 | red: named.sasquatchSocks, 40 | silver: named.fallingStar, 41 | teal: named.keppel, 42 | white: null, 43 | yellow: null 44 | }; 45 | 46 | module.exports = { 47 | ...named, 48 | ...css 49 | }; 50 | 51 | // Palette name, description and author: 52 | Object.defineProperty(module.exports, "meta", { 53 | value: { 54 | name: "flatui/russian", 55 | description: "Flat UI Russian Palette", 56 | author: "Alexander Zaytsev (http://dribbble.com/anwaltzzz)" 57 | } 58 | }); 59 | -------------------------------------------------------------------------------- /packages/flatui/src/spanish.js: -------------------------------------------------------------------------------- 1 | // Palette's specially-named colors: 2 | const named = { 3 | alamedaOchre: "#cc8e35", 4 | c84Purple: "#706fd3", 5 | celestialGreen: "#33d9b2", 6 | chleanFire: "#cd6133", 7 | crocodileTooth: "#d1ccc0", 8 | desert: "#ccae62", 9 | devilBlue: "#227093", 10 | eyeOfNewt: "#b33939", 11 | fluorescentRed: "#ff5252", 12 | greyPorcelain: "#84817a", 13 | hotStone: "#aaa69d", 14 | jacksonsPurple: "#40407a", 15 | liberty: "#474787", 16 | luckyPoint: "#2c2c54", 17 | mandarinSorbet: "#ffb142", 18 | palmSpringsSplash: "#218c74", 19 | spicedButternut: "#ffda79", 20 | summerSky: "#34ace0", 21 | swanWhite: "#f7f1e3", 22 | syntheticPumpkin: "#ff793f" 23 | }; 24 | 25 | // Map of the above specially-named colors to its equivalent CSS2 color: 26 | const css = { 27 | aqua: named.summerSky, 28 | black: null, 29 | blue: named.devilBlue, 30 | fuchsia: null, 31 | gray: named.greyPorcelain, 32 | green: named.palmSpringsSplash, 33 | lime: named.celestialGreen, 34 | maroon: named.eyeOfNewt, 35 | navy: named.luckyPoint, 36 | olive: named.alamedaOchre, 37 | orange: named.syntheticPumpkin, 38 | purple: named.jacksonsPurple, 39 | red: named.fluorescentRed, 40 | silver: named.crocodileTooth, 41 | teal: named.palmSpringsSplash, 42 | white: named.swanWhite, 43 | yellow: named.spicedButternut 44 | }; 45 | 46 | module.exports = { 47 | ...named, 48 | ...css 49 | }; 50 | 51 | // Palette name, description and author: 52 | Object.defineProperty(module.exports, "meta", { 53 | value: { 54 | name: "flatui/spanish", 55 | description: "Flat UI Spanish Palette", 56 | author: "Miguel Camacho (http://dribbble.com/miguelcm)" 57 | } 58 | }); 59 | -------------------------------------------------------------------------------- /packages/flatui/src/swedish.js: -------------------------------------------------------------------------------- 1 | // Palette's specially-named colors: 2 | const named = { 3 | blackPearl: "#1e272e", 4 | chromeYellow: "#ffa801", 5 | darkPeriwinkle: "#575fcf", 6 | freeSpeechBlue: "#3c40c6", 7 | freshTurquoise: "#34e7e4", 8 | goodNight: "#485460", 9 | greenTeal: "#05c46b", 10 | highlighterPink: "#ef5777", 11 | hintOfElusiveBlue: "#d2dae2", 12 | jadeDust: "#00d8d6", 13 | londonSquare: "#808e9b", 14 | megaman: "#4bcffa", 15 | mintyGreen: "#0be881", 16 | narenjiOrange: "#ffc048", 17 | redOrange: "#ff3f34", 18 | sizzlingRed: "#f53b57", 19 | spiroDiscoBall: "#0fbcf9", 20 | sunsetOrange: "#ff5e57", 21 | vibrantYellow: "#ffd32a", 22 | yrielYellow: "#ffdd59" 23 | }; 24 | 25 | // Map of the above specially-named colors to its equivalent CSS2 color: 26 | const css = { 27 | aqua: named.megaman, 28 | black: named.blackPearl, 29 | blue: named.devilBlue, 30 | fuchsia: null, 31 | gray: named.londonSquare, 32 | green: named.greenTeal, 33 | lime: named.mintyGreen, 34 | maroon: named.red, 35 | navy: named.freeSpeechBlue, 36 | olive: named.chromeYellow, 37 | orange: named.narenjiOrange, 38 | purple: named.darkPeriwinkle, 39 | red: named.sunsetOrange, 40 | silver: named.hintOfElusiveBlue, 41 | teal: named.greenTeal, 42 | white: null, 43 | yellow: named.yrielYellow 44 | }; 45 | 46 | module.exports = { 47 | ...named, 48 | ...css 49 | }; 50 | 51 | // Palette name, description and author: 52 | Object.defineProperty(module.exports, "meta", { 53 | value: { 54 | name: "flatui/swedish", 55 | description: "Flat UI Swedish Palette", 56 | author: "Jesper Dahlqvist (http://dribbble.com/yehsper)" 57 | } 58 | }); 59 | -------------------------------------------------------------------------------- /packages/flatui/src/turkish.js: -------------------------------------------------------------------------------- 1 | // Palette's specially-named colors: 2 | const named = { 3 | balticSea: "#3d3d3d", 4 | brightLilac: "#cd84f1", 5 | dornYellow: "#fff200", 6 | electricBlue: "#7efff5", 7 | hammamBlue: "#67e6dc", 8 | lightIndigo: "#7158e2", 9 | lightPurple: "#c56cf0", 10 | lightRed: "#ff4d4d", 11 | lightSlateBlue: "#7d5fff", 12 | mandarinSorbet: "#ffaf40", 13 | neonBlue: "#18dcff", 14 | prettyPlease: "#ffcccc", 15 | radiantYellow: "#ff9f1a", 16 | redOrange: "#ff3838", 17 | shadowedSteel: "#4b4b4b", 18 | spiroDiscoBall: "#17c0eb", 19 | unmellowYellow: "#fffa65", 20 | weirdGreen: "#3ae374", 21 | wintergreen: "#32ff7e", 22 | youngSalmon: "#ffb8b8" 23 | }; 24 | 25 | // Map of the above specially-named colors to its equivalent CSS2 color: 26 | const css = { 27 | aqua: named.electricBlue, 28 | black: named.balticSea, 29 | blue: named.spiroDiscoBall, 30 | fuchsia: named.brightLilac, 31 | gray: null, 32 | green: named.weirdGreen, 33 | lime: named.wintergreen, 34 | maroon: named.redOrange, 35 | navy: named.lightIndigo, 36 | olive: named.radiantYellow, 37 | orange: named.mandarinSorbet, 38 | purple: named.lightPurple, 39 | red: named.lightRed, 40 | silver: null, 41 | teal: named.hammamBlue, 42 | white: null, 43 | yellow: named.unmellowYellow 44 | }; 45 | 46 | module.exports = { 47 | ...named, 48 | ...css 49 | }; 50 | 51 | // Palette name, description and author: 52 | Object.defineProperty(module.exports, "meta", { 53 | value: { 54 | name: "flatui/turkish", 55 | description: "Flat UI Turkish Palette", 56 | author: "Tamer Köseli (http://dribbble.com/tamerkoseli)" 57 | } 58 | }); 59 | -------------------------------------------------------------------------------- /packages/material/LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2020 Contributors 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a 6 | copy of this software and associated documentation files (the "Software"), 7 | to deal in the Software without restriction, including without limitation 8 | the rights to use, copy, modify, merge, publish, distribute, sublicense, 9 | and/or sell copies of the Software, and to permit persons to whom the 10 | Software is furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included 13 | in all 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 20 | FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER 21 | DEALINGS IN THE SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /packages/material/README.md: -------------------------------------------------------------------------------- 1 | # `@webcolors/material` 2 | 3 | See https://github.com/zzzaim/webcolors#readme 4 | -------------------------------------------------------------------------------- /packages/material/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@webcolors/material", 3 | "description": "Material color palette", 4 | "version": "2.0.1", 5 | "license": "MIT", 6 | "author": { 7 | "name": "Zaim Bakar", 8 | "url": "https://zbr.works)" 9 | }, 10 | "contributors": [ 11 | { 12 | "name": "Google Inc.", 13 | "url": "https://material.io/design" 14 | } 15 | ], 16 | "homepage": "https://github.com/zzzaim/webcolors", 17 | "bugs": "https://github.com/zzzaim/webcolors/issues", 18 | "repository": { 19 | "type": "git", 20 | "url": "https://github.com/zzzaim/webcolors.git", 21 | "directory": "packages/material" 22 | }, 23 | "files": [ 24 | "*.js", 25 | "*.json", 26 | "*.css", 27 | "*.less", 28 | "*.scss", 29 | "*.styl" 30 | ], 31 | "webcolors": { 32 | "homepage": "https://material.io/design" 33 | } 34 | } -------------------------------------------------------------------------------- /packages/material/src/index.js: -------------------------------------------------------------------------------- 1 | const material = require("material-ui-colors"); 2 | 3 | // Default shade 4 | const shade = 500; 5 | 6 | // Palette's specially-named colors: 7 | const colors = {}; 8 | 9 | // Automatically assign material colors 10 | for (let color in material) { 11 | // Ignore 'common' palette 12 | if (color === "common") { 13 | continue; 14 | } 15 | 16 | // Set default shade 17 | if (material[color][shade]) { 18 | colors[color] = material[color][shade]; 19 | } 20 | 21 | // Set colorXXX names 22 | for (let s in material[color]) { 23 | colors[`${color}${s}`] = material[color][s]; 24 | } 25 | } 26 | 27 | // Map of the above specially-named colors to its equivalent CSS2 color: 28 | const css = { 29 | aqua: colors.cyan, 30 | black: material.common.black, 31 | blue: colors.blue, 32 | fuchsia: material.purple.A400, 33 | gray: colors.grey, 34 | green: colors.green, 35 | lime: colors.lime, 36 | maroon: colors.pink, 37 | navy: colors.indigo, 38 | olive: colors.amber, 39 | purple: colors.purple, 40 | red: colors.red, 41 | silver: material.grey[300], 42 | teal: colors.teal, 43 | white: material.common.white, 44 | yellow: colors.yellow 45 | }; 46 | 47 | module.exports = { 48 | ...colors, 49 | ...css 50 | }; 51 | 52 | // For debugging: run this script to output variables 53 | if (require.main === module) { 54 | console.log(module.exports); 55 | } 56 | -------------------------------------------------------------------------------- /packages/mrmrs/LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2020 Contributors 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a 6 | copy of this software and associated documentation files (the "Software"), 7 | to deal in the Software without restriction, including without limitation 8 | the rights to use, copy, modify, merge, publish, distribute, sublicense, 9 | and/or sell copies of the Software, and to permit persons to whom the 10 | Software is furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included 13 | in all 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 20 | FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER 21 | DEALINGS IN THE SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /packages/mrmrs/README.md: -------------------------------------------------------------------------------- 1 | # `@webcolors/mrmrs` 2 | 3 | See https://github.com/zzzaim/webcolors#readme 4 | -------------------------------------------------------------------------------- /packages/mrmrs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@webcolors/mrmrs", 3 | "description": "mrmrs color palette", 4 | "version": "2.0.1", 5 | "license": "MIT", 6 | "author": { 7 | "name": "Zaim Bakar", 8 | "url": "https://zbr.works)" 9 | }, 10 | "contributors": [ 11 | { 12 | "name": "@mrmrs", 13 | "email": "hi@mrmrs.cc", 14 | "url": "http://mrmrs.cc" 15 | } 16 | ], 17 | "homepage": "https://github.com/zzzaim/webcolors", 18 | "bugs": "https://github.com/zzzaim/webcolors/issues", 19 | "repository": { 20 | "type": "git", 21 | "url": "https://github.com/zzzaim/webcolors.git", 22 | "directory": "packages/mrmrs" 23 | }, 24 | "files": [ 25 | "*.js", 26 | "*.json", 27 | "*.css", 28 | "*.less", 29 | "*.scss", 30 | "*.styl" 31 | ], 32 | "webcolors": { 33 | "homepage": "http://clrs.cc/" 34 | } 35 | } -------------------------------------------------------------------------------- /packages/mrmrs/src/index.js: -------------------------------------------------------------------------------- 1 | module.exports = require("colors.css"); 2 | 3 | // For debugging: run this script to output variables 4 | if (require.main === module) { 5 | console.log(module.exports); 6 | } 7 | -------------------------------------------------------------------------------- /packages/tailwind/LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2020 Contributors 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a 6 | copy of this software and associated documentation files (the "Software"), 7 | to deal in the Software without restriction, including without limitation 8 | the rights to use, copy, modify, merge, publish, distribute, sublicense, 9 | and/or sell copies of the Software, and to permit persons to whom the 10 | Software is furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included 13 | in all 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 20 | FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER 21 | DEALINGS IN THE SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /packages/tailwind/README.md: -------------------------------------------------------------------------------- 1 | # `@webcolors/tailwind` 2 | 3 | See https://github.com/zzzaim/webcolors#readme 4 | -------------------------------------------------------------------------------- /packages/tailwind/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@webcolors/tailwind", 3 | "description": "Tailwind CSS color palette", 4 | "version": "2.0.1", 5 | "license": "MIT", 6 | "author": { 7 | "name": "Zaim Bakar", 8 | "url": "https://zbr.works)" 9 | }, 10 | "contributors": [ 11 | { 12 | "name": "Adam Wathan", 13 | "email": "adam.wathan@gmail.com" 14 | }, 15 | { 16 | "name": "Jonathan Reinink", 17 | "email": "jonathan@reinink.ca" 18 | }, 19 | { 20 | "name": "David Hemphill", 21 | "email": "davidlee.hemphill@gmail.com" 22 | } 23 | ], 24 | "homepage": "https://github.com/zzzaim/webcolors", 25 | "bugs": "https://github.com/zzzaim/webcolors/issues", 26 | "repository": { 27 | "type": "git", 28 | "url": "https://github.com/zzzaim/webcolors.git", 29 | "directory": "packages/tailwind" 30 | }, 31 | "files": [ 32 | "*.js", 33 | "*.json", 34 | "*.css", 35 | "*.less", 36 | "*.scss", 37 | "*.styl" 38 | ], 39 | "webcolors": { 40 | "homepage": "http://tailwindcss.com/" 41 | } 42 | } -------------------------------------------------------------------------------- /packages/tailwind/src/index.js: -------------------------------------------------------------------------------- 1 | const tailwind = require("tailwindcss/defaultTheme").colors; 2 | 3 | // Default shade 4 | const shade = 500; 5 | 6 | // Default "lighter" shade 7 | const lighter = 200; 8 | 9 | // Default "darker" shade 10 | const darker = 800; 11 | 12 | // Palette's specially-named colors: 13 | const colors = {}; 14 | 15 | // Automatically assign Tailwind colors 16 | for (let color in tailwind) { 17 | if (typeof tailwind[color][shade] === "string") { 18 | colors[color] = tailwind[color][shade]; 19 | } 20 | } 21 | 22 | // Map of the above specially-named colors to its equivalent CSS2 color: 23 | const css = { 24 | aqua: tailwind.teal[lighter], 25 | black: tailwind.black, 26 | blue: colors.blue, 27 | gray: colors.gray, 28 | green: colors.green, 29 | lime: tailwind.green[lighter], 30 | maroon: tailwind.pink[darker], 31 | navy: tailwind.blue[darker], 32 | olive: tailwind.yellow[darker], 33 | purple: colors.purple, 34 | red: colors.red, 35 | silver: tailwind.gray[lighter], 36 | teal: colors.teal, 37 | white: tailwind.white, 38 | yellow: colors.yellow 39 | }; 40 | 41 | module.exports = { 42 | ...colors, 43 | ...css 44 | }; 45 | 46 | // For debugging: run this script to output variables 47 | if (require.main === module) { 48 | console.log(module.exports); 49 | } 50 | -------------------------------------------------------------------------------- /packages/webcolors/LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2020 Contributors 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a 6 | copy of this software and associated documentation files (the "Software"), 7 | to deal in the Software without restriction, including without limitation 8 | the rights to use, copy, modify, merge, publish, distribute, sublicense, 9 | and/or sell copies of the Software, and to permit persons to whom the 10 | Software is furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included 13 | in all 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 20 | FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER 21 | DEALINGS IN THE SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /packages/webcolors/README.md: -------------------------------------------------------------------------------- 1 | # webcolors 2 | 3 | > All the colors of the web 4 | 5 | ## Palettes 6 | 7 | - **bootstrap**: [getbootstrap.com](https://getbootstrap.com/) 8 | - **bulma**: [bulma.io](https://bulma.io) 9 | - **flatui**: [FlatUI colors](http://flatuicolors.com/) 10 | - **material**: [Google Material Design](https://material.io/design/color/the-color-system.html) 11 | - **mrmrs**: [clrs.cc](http://clrs.cc/) / [mrmrs-colors](https://github.com/mrmrs/colors) 12 | - **tailwind**: [tailwindcss.com](https://tailwindcss.com) 13 | 14 | ## Formats 15 | 16 | - [CSS (custom properties)](#with-css-custom-properties) 17 | - [SCSS](#with-scss) 18 | - [Less](#with-less) 19 | - [Stylus](#with-stylus) 20 | - [JavaScript/JSON](#with-javascript-or-json) 21 | 22 | ## Installation 23 | 24 | ```shell 25 | $ npm install webcolors 26 | ``` 27 | 28 | ### With CSS custom properties 29 | 30 | Use a CSS preprocessor such ass [PostCSS](https://postcss.org) to handle 31 | `@import` syntax. 32 | 33 | ```css 34 | @import "webcolors/material/index.css"; 35 | 36 | body { 37 | color: --red; 38 | background: --yellow; 39 | } 40 | ``` 41 | 42 | ### With SCSS 43 | 44 | Use [sass](https://sass-lang.com) to handle `@import` syntax. The format of 45 | the import file path depends on your configuration. 46 | 47 | ```scss 48 | @import "~webcolors/material/index.css"; 49 | 50 | body { 51 | color: $red; 52 | background: $yellow; 53 | } 54 | ``` 55 | 56 | ### With LESS 57 | 58 | Install and configure [Less.js](http://lesscss.org/). 59 | 60 | ```less 61 | @import "node_modules/webcolors/flatui/index"; 62 | 63 | body { 64 | color: @red; 65 | background: @blue; 66 | } 67 | ``` 68 | 69 | ### With Stylus 70 | 71 | Install and configure [Stylus](https://stylus-lang.com/). 72 | 73 | ```styl 74 | @import "node_modules/webcolors/mrmrs"; 75 | 76 | body { 77 | color: orange; 78 | background: white; 79 | } 80 | ``` 81 | 82 | ### With JavaScript or JSON 83 | 84 | Colors can be imported directly from Node.js scripts or modules. 85 | 86 | ```javascript 87 | // All palettes: 88 | const webcolors = require("webcolors"); 89 | 90 | // Specific palettes: 91 | const bootstrap = require("webcolors/bootstrap"); 92 | const material = require("webcolors/material"); 93 | 94 | console.log(`FlatUI yellow: ${webcolors.flatui.yellow}`); 95 | console.log(`Bootstrap red: ${bootstrap.red}`); 96 | console.log(`Material blue: ${material.blue}`); 97 | ``` 98 | 99 | Palettes pre-exported as JSON files can be found in the package's palette 100 | directories. 101 | 102 | ## Changelog 103 | 104 | **1.2.2** - Fix typo in Material palette for "olive" color. 105 | 106 | **1.2.0** - Add plain, non-number-prefixed Material color aliases, e.g. 107 | `cyan` => `cyan500`, `indigo` => `indigo500`, etc. 108 | 109 | **1.1.0** - All color values are normalized as uppercase hex strings. 110 | 111 | **1.0.0** - Breaking change to directory structure. No more `dist` folder, 112 | individual palettes are available at root directory. 113 | 114 | ## Inspiration 115 | 116 | Inspired by the [material-colors](https://github.com/shuhei/material-colors) 117 | and [mrmrs-colors](https://github.com/mrmrs/colors) packages. 118 | 119 | ## License 120 | 121 | MIT - see [LICENSE](LICENSE) file. 122 | -------------------------------------------------------------------------------- /packages/webcolors/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webcolors", 3 | "description": "Color palettes", 4 | "version": "2.0.1", 5 | "license": "MIT", 6 | "author": { 7 | "name": "Zaim Bakar", 8 | "url": "https://zbr.works)" 9 | }, 10 | "homepage": "https://github.com/zzzaim/webcolors", 11 | "bugs": "https://github.com/zzzaim/webcolors/issues", 12 | "repository": { 13 | "type": "git", 14 | "url": "https://github.com/zzzaim/webcolors.git", 15 | "directory": "packages/webcolors" 16 | }, 17 | "files": [ 18 | "**/*.js", 19 | "**/*.json", 20 | "**/*.css", 21 | "**/*.less", 22 | "**/*.scss", 23 | "**/*.styl" 24 | ] 25 | } -------------------------------------------------------------------------------- /tasks/doc.js: -------------------------------------------------------------------------------- 1 | const Fs = require("fs"); 2 | const Path = require("path"); 3 | const Crypto = require("crypto"); 4 | const rc = require("../docs/.docsrc"); 5 | const palettes = require("../packages/webcolors"); 6 | const { colors, keywords } = require("./util"); 7 | 8 | const docsDir = process.env.doc_dir || "docs"; 9 | const docsEnv = process.env.doc_env || "dev"; 10 | const config = rc[docsEnv] || {}; 11 | const baseURL = config.baseURL || ""; 12 | 13 | const colorSkip = new Set(["black", "white"]); 14 | const colorList = colors.map(keys => keys[0]).filter(k => !colorSkip.has(k)); 15 | const allPalettes = {}; 16 | const paletteInfo = {}; 17 | 18 | for (let key of Object.keys(palettes)) { 19 | allPalettes[key] = fillPalette(palettes[key]); 20 | paletteInfo[key] = require(`../packages/${key}/package.json`).webcolors; 21 | } 22 | 23 | function fillPalette(object) { 24 | return Object.keys(object).reduce((acc, key) => { 25 | acc[key] = object[key] || (keywords.has(key) ? key : null); 26 | return acc; 27 | }, {}); 28 | } 29 | 30 | function hash(path) { 31 | path = Path.join(docsDir, path); 32 | 33 | const sha = Crypto.createHash("sha256"); 34 | const content = Fs.readFileSync(path, "utf-8"); 35 | 36 | sha.update(content); 37 | 38 | return sha.digest("hex").substring(0, 7); 39 | } 40 | 41 | function uri(path) { 42 | const gitHash = hash(path); 43 | const query = gitHash ? `?${gitHash}` : ""; 44 | 45 | return `${baseURL}${path}${query}`; 46 | } 47 | 48 | module.exports = { 49 | colors: colorList, 50 | palettes: allPalettes, 51 | paletteInfo, 52 | uri 53 | }; 54 | -------------------------------------------------------------------------------- /tasks/index.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | const Fs = require("fs"); 4 | const Path = require("path"); 5 | const palettes = Fs.readdirSync( 6 | Path.resolve(__dirname, "..", "packages") 7 | ).filter(p => p !== "webcolors"); 8 | 9 | module.exports = { palettes: toObjects(palettes) }; 10 | 11 | function toObjects(list) { 12 | return list.map(name => ({ name })); 13 | } 14 | -------------------------------------------------------------------------------- /tasks/json.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | const Path = require("path"); 4 | const { mapToObject, normalizePalette } = require("./util"); 5 | 6 | async function main(file) { 7 | let palette = require(Path.resolve(process.cwd(), file)); 8 | 9 | if (typeof palette === "function") { 10 | palette = await palette(); 11 | } 12 | 13 | return mapToObject(normalizePalette(palette)); 14 | } 15 | 16 | if (require.main === module) { 17 | main(process.argv[2]) 18 | .then(o => console.log(JSON.stringify(o, null, 2))) 19 | .catch(e => { 20 | console.error(e); 21 | process.exit(1); 22 | }); 23 | } 24 | -------------------------------------------------------------------------------- /tasks/publish.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | 3 | for pkg in packages/*; do 4 | if [ ! -d "$pkg" ]; then 5 | continue; 6 | fi 7 | 8 | ( cd "$pkg" && npm publish "$@" ) 9 | 10 | echo 11 | done 12 | -------------------------------------------------------------------------------- /tasks/serve.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | 3 | trap "kill 0" EXIT 4 | 5 | npx='npx --no-install' 6 | 7 | $npx onchange \ 8 | 'docs/src/**/*.pug' \ 9 | 'docs/src/**/*.svg' \ 10 | 'docs/src/**/*.css' \ 11 | 'docs/src/**/*.js' \ 12 | '.*rc.js' \ 13 | --initial \ 14 | --delay 250 \ 15 | -- make --no-print-directory docs & 16 | 17 | $npx reload -d docs -e html,svg,css,js 18 | -------------------------------------------------------------------------------- /tasks/util.js: -------------------------------------------------------------------------------- 1 | const Color = require("color"); 2 | 3 | const colors = [ 4 | ["aqua"], 5 | ["blue"], 6 | ["fuchsia"], 7 | ["gray", "grey"], 8 | ["green"], 9 | ["lime"], 10 | ["maroon"], 11 | ["navy"], 12 | ["olive"], 13 | ["orange"], 14 | ["purple"], 15 | ["red"], 16 | ["silver"], 17 | ["teal"], 18 | ["yellow"], 19 | ["black"], 20 | ["white"] 21 | ]; 22 | 23 | const keywords = new Set(colors.flat()); 24 | 25 | function mapToObject(map) { 26 | const object = {}; 27 | 28 | for (let [k, v] of map) { 29 | object[k] = v; 30 | } 31 | 32 | return object; 33 | } 34 | 35 | function objectToMap(object) { 36 | return new Map(Object.keys(object).map(k => [k, object[k]])); 37 | } 38 | 39 | function colorKeysOnly(map) { 40 | if (!(map instanceof Map)) { 41 | map = objectToMap(map); 42 | } 43 | 44 | for (let k of map.keys()) { 45 | if (!keywords.has(k)) { 46 | map.delete(k); 47 | } 48 | } 49 | 50 | return map; 51 | } 52 | 53 | function normalizePalette(map) { 54 | if (!(map instanceof Map)) { 55 | map = objectToMap(map); 56 | } 57 | 58 | for (let [k, v] of map) { 59 | map.set(k, Color(v).hex()); 60 | } 61 | 62 | for (let keys of colors) { 63 | const useKey = keys[0]; 64 | const keyInMap = keys.find(k => map.has(k)); 65 | map.set(useKey, keyInMap ? map.get(keyInMap) : null); 66 | } 67 | 68 | return map; 69 | } 70 | 71 | module.exports = exports = { 72 | colors, 73 | keywords, 74 | mapToObject, 75 | objectToMap, 76 | colorKeysOnly, 77 | normalizePalette 78 | }; 79 | -------------------------------------------------------------------------------- /tasks/version.js: -------------------------------------------------------------------------------- 1 | const Fs = require("fs"); 2 | const Path = require("path"); 3 | const version = require("../package.json").version; 4 | 5 | const dryRunFlag = new Set(["-n", "--dry-run"]); 6 | 7 | async function main(dryRun = false) { 8 | console.log(`Version: ${version}`); 9 | 10 | const stdout = process.stderr; 11 | const pkgPath = Path.resolve(__dirname, "..", "packages"); 12 | 13 | Fs.readdirSync(pkgPath).forEach(p => { 14 | const pkgFile = Path.join(pkgPath, p, "package.json"); 15 | const pkgContent = Fs.readFileSync(pkgFile, "utf-8"); 16 | const pkg = JSON.parse(pkgContent); 17 | 18 | if (version !== pkg.version) { 19 | stdout.write(`Bump ${pkg.name}: ${pkg.version} -> ${version}`); 20 | 21 | pkg.version = version; 22 | 23 | if (!dryRun) { 24 | Fs.writeFileSync(pkgFile, JSON.stringify(pkg, null, 2), "utf-8"); 25 | stdout.write(" [written]"); 26 | } 27 | 28 | stdout.write("\n"); 29 | } 30 | }); 31 | } 32 | 33 | if (require.main === module) { 34 | main(dryRunFlag.has(process.argv[2])).catch(e => { 35 | console.error(e); 36 | process.exit(1); 37 | }); 38 | } 39 | -------------------------------------------------------------------------------- /tasks/view.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | const Path = require("path"); 4 | const { keywords } = require("./util"); 5 | 6 | function main(file) { 7 | const palette = require(Path.resolve(process.cwd(), file)); 8 | 9 | return { 10 | source: JSON.stringify(palette, null, 2), 11 | colors: Object.keys(palette) 12 | .map(name => ({ 13 | name, 14 | value: palette[name] || (keywords.has(name) ? name : null) 15 | })) 16 | .filter(o => o.value) 17 | }; 18 | } 19 | 20 | if (require.main === module) { 21 | console.log(JSON.stringify(main(process.argv[2]))); 22 | } 23 | -------------------------------------------------------------------------------- /templates/css.mustache: -------------------------------------------------------------------------------- 1 | :root { 2 | {{#colors}} 3 | --{{name}}: {{value}}; 4 | {{/colors}} 5 | } 6 | 7 | {{! vim: set ft=css.mustache: }} 8 | -------------------------------------------------------------------------------- /templates/index.js.mustache: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | {{#palettes}} 3 | {{name}}: require("./{{name}}"), 4 | {{/palettes}} 5 | }; 6 | 7 | {{! vim: set ft=javascript.mustache: }} 8 | -------------------------------------------------------------------------------- /templates/js.mustache: -------------------------------------------------------------------------------- 1 | module.exports = {{{source}}}; 2 | -------------------------------------------------------------------------------- /templates/less.mustache: -------------------------------------------------------------------------------- 1 | {{#colors}} 2 | @{{name}}: {{value}}; 3 | {{/colors}} 4 | 5 | {{! vim: set ft=less.mustache }} 6 | -------------------------------------------------------------------------------- /templates/scss.mustache: -------------------------------------------------------------------------------- 1 | {{#colors}} 2 | ${{name}}: {{value}}; 3 | {{/colors}} 4 | 5 | {{! vim: set ft=scss.mustache }} 6 | -------------------------------------------------------------------------------- /templates/styl.mustache: -------------------------------------------------------------------------------- 1 | {{#colors}} 2 | {{name}} = {{value}} 3 | {{/colors}} 4 | 5 | {{! vim set ft=stylus.mustache }} 6 | --------------------------------------------------------------------------------