├── .gitignore ├── README.md ├── colors.json ├── package.json ├── typegen.js └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.log 3 | /index.d.ts 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Material Design Color Palettes 2 | 3 | https://material.io/design/color/the-color-system.html 4 | 5 | ## Install 6 | 7 | This package actually only contains a [JSON file](./colors.json). 8 | 9 | ```bash 10 | yarn add @egoist/md-colors --dev 11 | ``` 12 | 13 | ## Usage 14 | 15 | ### Using with TailwindCSS 16 | 17 | In your `tailwind.config.js`: 18 | 19 | ```js 20 | const colors = require('@egoist/md-colors') 21 | 22 | module.exports = { 23 | theme: { 24 | // Override default colors here 25 | colors 26 | } 27 | } 28 | ``` 29 | 30 | Color names are camelCased, e.g. `deepPurple` and `lightBlue`, you can reference one via `text-lightBlue-200` in TailwindCSS. 31 | 32 | ### TypeScript support 33 | 34 | To load this module in a `.ts` file: 35 | 36 | ```ts 37 | // Individual imports 38 | import { red, green } from '@egoist/md-colors' 39 | 40 | // Or load everything 41 | import * as colors from '@egoist/md-colors' 42 | ``` 43 | 44 | ## License 45 | 46 | MIT. 47 | -------------------------------------------------------------------------------- /colors.json: -------------------------------------------------------------------------------- 1 | { 2 | "red": { 3 | "50": "#ffebee", 4 | "100": "#ffcdd2", 5 | "200": "#ef9a9a", 6 | "300": "#e57373", 7 | "400": "#ef5350", 8 | "500": "#f44336", 9 | "600": "#e53935", 10 | "700": "#d32f2f", 11 | "800": "#c62828", 12 | "900": "#b71c1c", 13 | "a100": "#ff8a80", 14 | "a200": "#ff5252", 15 | "a400": "#ff1744", 16 | "a700": "#d50000" 17 | }, 18 | "pink": { 19 | "50": "#fce4ec", 20 | "100": "#f8bbd0", 21 | "200": "#f48fb1", 22 | "300": "#f06292", 23 | "400": "#ec407a", 24 | "500": "#e91e63", 25 | "600": "#d81b60", 26 | "700": "#c2185b", 27 | "800": "#ad1457", 28 | "900": "#880e4f", 29 | "a100": "#ff80ab", 30 | "a200": "#ff4081", 31 | "a400": "#f50057", 32 | "a700": "#c51162" 33 | }, 34 | "purple": { 35 | "50": "#f3e5f5", 36 | "100": "#e1bee7", 37 | "200": "#ce93d8", 38 | "300": "#ba68c8", 39 | "400": "#ab47bc", 40 | "500": "#9c27b0", 41 | "600": "#8e24aa", 42 | "700": "#7b1fa2", 43 | "800": "#6a1b9a", 44 | "900": "#4a148c", 45 | "a100": "#ea80fc", 46 | "a200": "#e040fb", 47 | "a400": "#d500f9", 48 | "a700": "#aa00ff" 49 | }, 50 | "deepPurple": { 51 | "50": "#ede7f6", 52 | "100": "#d1c4e9", 53 | "200": "#b39ddb", 54 | "300": "#9575cd", 55 | "400": "#7e57c2", 56 | "500": "#673ab7", 57 | "600": "#5e35b1", 58 | "700": "#512da8", 59 | "800": "#4527a0", 60 | "900": "#311b92", 61 | "a100": "#b388ff", 62 | "a200": "#7c4dff", 63 | "a400": "#651fff", 64 | "a700": "#6200ea" 65 | }, 66 | "indigo": { 67 | "50": "#e8eaf6", 68 | "100": "#c5cae9", 69 | "200": "#9fa8da", 70 | "300": "#7986cb", 71 | "400": "#5c6bc0", 72 | "500": "#3f51b5", 73 | "600": "#3949ab", 74 | "700": "#303f9f", 75 | "800": "#283593", 76 | "900": "#1a237e", 77 | "a100": "#8c9eff", 78 | "a200": "#536dfe", 79 | "a400": "#3d5afe", 80 | "a700": "#304ffe" 81 | }, 82 | "blue": { 83 | "50": "#e3f2fd", 84 | "100": "#bbdefb", 85 | "200": "#90caf9", 86 | "300": "#64b5f6", 87 | "400": "#42a5f5", 88 | "500": "#2196f3", 89 | "600": "#1e88e5", 90 | "700": "#1976d2", 91 | "800": "#1565c0", 92 | "900": "#0d47a1", 93 | "a100": "#82b1ff", 94 | "a200": "#448aff", 95 | "a400": "#2979ff", 96 | "a700": "#2962ff" 97 | }, 98 | "lightBlue": { 99 | "50": "#e1f5fe", 100 | "100": "#b3e5fc", 101 | "200": "#81d4fa", 102 | "300": "#4fc3f7", 103 | "400": "#29b6f6", 104 | "500": "#03a9f4", 105 | "600": "#039be5", 106 | "700": "#0288d1", 107 | "800": "#0277bd", 108 | "900": "#01579b", 109 | "a100": "#80d8ff", 110 | "a200": "#40c4ff", 111 | "a400": "#00b0ff", 112 | "a700": "#0091ea" 113 | }, 114 | "cyan": { 115 | "50": "#e0f7fa", 116 | "100": "#b2ebf2", 117 | "200": "#80deea", 118 | "300": "#4dd0e1", 119 | "400": "#26c6da", 120 | "500": "#00bcd4", 121 | "600": "#00acc1", 122 | "700": "#0097a7", 123 | "800": "#00838f", 124 | "900": "#006064", 125 | "a100": "#84ffff", 126 | "a200": "#18ffff", 127 | "a400": "#00e5ff", 128 | "a700": "#00b8d4" 129 | }, 130 | "teal": { 131 | "50": "#e0f2f1", 132 | "100": "#b2dfdb", 133 | "200": "#80cbc4", 134 | "300": "#4db6ac", 135 | "400": "#26a69a", 136 | "500": "#009688", 137 | "600": "#00897b", 138 | "700": "#00796b", 139 | "800": "#00695c", 140 | "900": "#004d40", 141 | "a100": "#a7ffeb", 142 | "a200": "#64ffda", 143 | "a400": "#1de9b6", 144 | "a700": "#00bfa5" 145 | }, 146 | "green": { 147 | "50": "#e8f5e9", 148 | "100": "#c8e6c9", 149 | "200": "#a5d6a7", 150 | "300": "#81c784", 151 | "400": "#66bb6a", 152 | "500": "#4caf50", 153 | "600": "#43a047", 154 | "700": "#388e3c", 155 | "800": "#2e7d32", 156 | "900": "#1b5e20", 157 | "a100": "#b9f6ca", 158 | "a200": "#69f0ae", 159 | "a400": "#00e676", 160 | "a700": "#00c853" 161 | }, 162 | "lightGreen": { 163 | "50": "#f1f8e9", 164 | "100": "#dcedc8", 165 | "200": "#c5e1a5", 166 | "300": "#aed581", 167 | "400": "#9ccc65", 168 | "500": "#8bc34a", 169 | "600": "#7cb342", 170 | "700": "#689f38", 171 | "800": "#558b2f", 172 | "900": "#33691e", 173 | "a100": "#ccff90", 174 | "a200": "#b2ff59", 175 | "a400": "#76ff03", 176 | "a700": "#64dd17" 177 | }, 178 | "lime": { 179 | "50": "#f9fbe7", 180 | "100": "#f0f4c3", 181 | "200": "#e6ee9c", 182 | "300": "#dce775", 183 | "400": "#d4e157", 184 | "500": "#cddc39", 185 | "600": "#c0ca33", 186 | "700": "#afb42b", 187 | "800": "#9e9d24", 188 | "900": "#827717", 189 | "a100": "#f4ff81", 190 | "a200": "#eeff41", 191 | "a400": "#c6ff00", 192 | "a700": "#aeea00" 193 | }, 194 | "yellow": { 195 | "50": "#fffde7", 196 | "100": "#fff9c4", 197 | "200": "#fff59d", 198 | "300": "#fff176", 199 | "400": "#ffee58", 200 | "500": "#ffeb3b", 201 | "600": "#fdd835", 202 | "700": "#fbc02d", 203 | "800": "#f9a825", 204 | "900": "#f57f17", 205 | "a100": "#ffff8d", 206 | "a200": "#ffff00", 207 | "a400": "#ffea00", 208 | "a700": "#ffd600" 209 | }, 210 | "amber": { 211 | "50": "#fff8e1", 212 | "100": "#ffecb3", 213 | "200": "#ffe082", 214 | "300": "#ffd54f", 215 | "400": "#ffca28", 216 | "500": "#ffc107", 217 | "600": "#ffb300", 218 | "700": "#ffa000", 219 | "800": "#ff8f00", 220 | "900": "#ff6f00", 221 | "a100": "#ffe57f", 222 | "a200": "#ffd740", 223 | "a400": "#ffc400", 224 | "a700": "#ffab00" 225 | }, 226 | "orange": { 227 | "50": "#fff3e0", 228 | "100": "#ffe0b2", 229 | "200": "#ffcc80", 230 | "300": "#ffb74d", 231 | "400": "#ffa726", 232 | "500": "#ff9800", 233 | "600": "#fb8c00", 234 | "700": "#f57c00", 235 | "800": "#ef6c00", 236 | "900": "#e65100", 237 | "a100": "#ffd180", 238 | "a200": "#ffab40", 239 | "a400": "#ff9100", 240 | "a700": "#ff6d00" 241 | }, 242 | "deepOrange": { 243 | "50": "#fbe9e7", 244 | "100": "#ffccbc", 245 | "200": "#ffab91", 246 | "300": "#ff8a65", 247 | "400": "#ff7043", 248 | "500": "#ff5722", 249 | "600": "#f4511e", 250 | "700": "#e64a19", 251 | "800": "#d84315", 252 | "900": "#bf360c", 253 | "a100": "#ff9e80", 254 | "a200": "#ff6e40", 255 | "a400": "#ff3d00", 256 | "a700": "#dd2c00" 257 | }, 258 | "brown": { 259 | "50": "#efebe9", 260 | "100": "#d7ccc8", 261 | "200": "#bcaaa4", 262 | "300": "#a1887f", 263 | "400": "#8d6e63", 264 | "500": "#795548", 265 | "600": "#6d4c41", 266 | "700": "#5d4037", 267 | "800": "#4e342e", 268 | "900": "#3e2723" 269 | }, 270 | "gray": { 271 | "50": "#fafafa", 272 | "100": "#f5f5f5", 273 | "200": "#eeeeee", 274 | "300": "#e0e0e0", 275 | "400": "#bdbdbd", 276 | "500": "#9e9e9e", 277 | "600": "#757575", 278 | "700": "#616161", 279 | "800": "#424242", 280 | "900": "#212121" 281 | }, 282 | "blueGray": { 283 | "50": "#eceff1", 284 | "100": "#cfd8dc", 285 | "200": "#b0bec5", 286 | "300": "#90a4ae", 287 | "400": "#78909c", 288 | "500": "#607d8b", 289 | "600": "#546e7a", 290 | "700": "#455a64", 291 | "800": "#37474f", 292 | "900": "#263238" 293 | }, 294 | "black": "#000000", 295 | "white": "#ffffff", 296 | "transparent": "transparent" 297 | } 298 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@egoist/md-colors", 3 | "version": "1.2.2", 4 | "publishConfig": { 5 | "access": "public" 6 | }, 7 | "author": { 8 | "email": "0x142857@gmail.com", 9 | "name": "EGOIST" 10 | }, 11 | "main": "colors.json", 12 | "types": "index.d.ts", 13 | "scripts": { 14 | "build": "node typegen", 15 | "prepublishOnly": "npm run build" 16 | }, 17 | "files": [ 18 | "colors.json", 19 | "index.d.ts" 20 | ], 21 | "keywords": [ 22 | "material", 23 | "material-ui", 24 | "material-design", 25 | "color", 26 | "colors", 27 | "palettes", 28 | "css" 29 | ], 30 | "license": "MIT", 31 | "devDependencies": { 32 | "prettier": "^1.19.1" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /typegen.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs') 2 | const prettier = require('prettier') 3 | const colors = require('./colors') 4 | 5 | const types = Object.keys(colors).map(color => { 6 | const value = colors[color] 7 | if (typeof value === 'string') { 8 | return `export const ${color}: ${JSON.stringify(value)}` 9 | } 10 | return `export const ${color}: { 11 | ${Object.keys(value).map(key => { 12 | return `${JSON.stringify(key)}: ${JSON.stringify(value[key])}` 13 | }).join('\n')} 14 | }` 15 | }).join('\n\n') 16 | 17 | fs.writeFileSync('./index.d.ts', prettier.format(types, { 18 | parser: 'typescript', 19 | semi: false, 20 | singleQuote: true 21 | }), 'utf8') -------------------------------------------------------------------------------- /yarn.lock: -------------------------------------------------------------------------------- 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. 2 | # yarn lockfile v1 3 | 4 | 5 | prettier@^1.19.1: 6 | version "1.19.1" 7 | resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.19.1.tgz#f7d7f5ff8a9cd872a7be4ca142095956a60797cb" 8 | integrity sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew== 9 | --------------------------------------------------------------------------------