├── .github
    └── workflows
    │   └── pull_request.yml
├── .gitignore
├── .prettierrc
├── README.md
├── package.json
├── src
    ├── colors
    │   └── index.ts
    ├── combination
    │   ├── analogous.spec.ts
    │   ├── analogous.ts
    │   ├── complement.spec.ts
    │   ├── complement.ts
    │   ├── monochromatic.spec.ts
    │   ├── monochromatic.ts
    │   ├── splitComplement.spec.ts
    │   ├── splitComplement.ts
    │   ├── tetrad.spec.ts
    │   ├── tetrad.ts
    │   ├── triad.spec.ts
    │   └── triad.ts
    ├── conversion
    │   ├── hexToPercentageRgb.spec.ts
    │   ├── hexToPercentageRgb.ts
    │   ├── hexToRgb.spec.ts
    │   ├── hexToRgb.ts
    │   ├── hslToHex.spec.ts
    │   ├── hslToHex.ts
    │   ├── hueToRgb.spec.ts
    │   ├── hueToRgb.ts
    │   ├── rgbToHex.spec.ts
    │   ├── rgbToHex.ts
    │   ├── rgbToHsl.spec.ts
    │   ├── rgbToHsl.ts
    │   ├── singleHex.spec.ts
    │   └── singleHex.ts
    ├── index.ts
    ├── modification
    │   ├── brighten.spec.ts
    │   ├── brighten.ts
    │   ├── darken.spec.ts
    │   ├── darken.ts
    │   ├── desaturate.spec.ts
    │   ├── desaturate.ts
    │   ├── greyscale.spec.ts
    │   ├── greyscale.ts
    │   ├── lighten.spec.ts
    │   ├── lighten.ts
    │   ├── saturate.spec.ts
    │   └── saturate.ts
    └── utilities
    │   ├── getBrightness.spec.ts
    │   ├── getBrightness.ts
    │   ├── getHexColorAlpha.spec.ts
    │   ├── getHexColorAlpha.ts
    │   ├── getRelativePercentage.spec.ts
    │   ├── getRelativePercentage.ts
    │   ├── isDark.spec.ts
    │   ├── isDark.ts
    │   ├── isHexColorValid.spec.ts
    │   ├── isHexColorValid.ts
    │   ├── isLight.spec.ts
    │   ├── isLight.ts
    │   ├── random.spec.ts
    │   ├── random.ts
    │   ├── setHexColorAlpha.spec.ts
    │   └── setHexColorAlpha.ts
└── tsconfig.json


/.github/workflows/pull_request.yml:
--------------------------------------------------------------------------------
 1 | name: PR
 2 | 
 3 | on: pull_request
 4 | 
 5 | jobs:
 6 |   build:
 7 |     name: Tests
 8 |     runs-on: ubuntu-latest
 9 |     steps:
10 |       - uses: actions/checkout@v2
11 |       - name: Install modules
12 |         run: yarn
13 |       - name: Run tests
14 |         run: yarn test


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | yarn.lock


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "singleQuote": true,
3 |   "trailingComma": "es5"
4 | }
5 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | <p align="center">
  2 |     <img alt="react-native-elements" src="https://images.emojiterra.com/google/android-11/512px/1f3a8.png" width="256">
  3 | </p>
  4 | 
  5 | <h1 align="center"> React Native Color Toolkit</h1>
  6 | <p align="center">
  7 | A well-tested library written in typescript to with a lot of tools to help mobile developers who care about color.
  8 | </p>
  9 | 
 10 | 	
 11 | 
 12 | <p align="center">
 13 |   <a href="https://www.npmjs.com/package/react-native-color-toolkit"><img src="https://img.shields.io/npm/v/react-native-color-toolkit.svg"></a>
 14 |   <a href="https://github.com/juniorklawa/react-native-auto-size-text"><img src="https://img.shields.io/github/stars/juniorklawa/react-native-color-toolkit"></a>
 15 |   <a href="https://www.npmjs.com/package/react-native-color-toolkit"><img src="https://img.shields.io/npm/dm/react-native-color-toolkit.svg"></a>
 16 |   <a href="https://github.com/juniorklawa/react-native-color-toolkit/actions"><img src="https://github.com/juniorklawa/react-native-color-toolkit/workflows/PR/badge.svg"></a>
 17 |    <a href="https://github.com/prettier/prettier"><img src="https://img.shields.io/badge/styled_with-prettier-ff69b4.svg"></a>
 18 |   <a href="https://opensource.org/licenses/MIT"><img src="https://img.shields.io/badge/License-MIT-blue.svg"></a>
 19 | </p>
 20 | <br />
 21 | 
 22 | 
 23 | <!-- TABLE OF CONTENTS -->
 24 | # Table of Contents
 25 | 
 26 | * [Installation](#installation)
 27 | * [Modification Functions](#modification-functions)
 28 | * [Conversion Functions](#conversion-functions)
 29 | * [Utility Functions](#utility-functions)
 30 | * [Material Colors Palette](#material-colors-pallete)
 31 | * [Contributing](#contributing)
 32 | 
 33 | 
 34 | 
 35 | # Installation
 36 | #### yarn
 37 | ```sh
 38 | yarn react-native-color-toolkit
 39 | ```
 40 | #### npm
 41 | ```sh
 42 | npm i react-native-color-toolkit
 43 | ```
 44 | 
 45 | # Modification Functions
 46 | 
 47 | ## brighten(color: string,  amount: number)
 48 | A function that returns  a brighter color given a color and a percentage (from 0 to 1).
 49 | 
 50 | ### Example
 51 | ```jsx
 52 | import { brighten } from  'react-native-color-toolkit';
 53 | 
 54 | ...
 55 | 
 56 | <View  style={{justifyContent:  'center', alignItems:  'center'}}>
 57 | 	<View  style={[styles.box, {backgroundColor: '#2196F3'}]} />
 58 | 	<Text  style={styles.subtitle}>Modified color</Text>
 59 | </View>
 60 | <View  style={{justifyContent:  'center', alignItems:  'center'}}>
 61 | 	<View  style={[styles.box, {backgroundColor: brighten('#2196F3', 0.5)}]} />
 62 | 	<Text  style={styles.subtitle}>Original color</Text>
 63 | </View>
 64 | 
 65 | ...
 66 | ```
 67 | ### Result
 68 | ![enter image description here](https://i.imgur.com/iO4iNbO.png)
 69 | 
 70 | ## darken(color: string,  amount: number)
 71 | A function that returns  a darker color given a color and a percentage (from 0 to 1).
 72 | 
 73 | ### Example
 74 | ```jsx
 75 | import { darken } from  'react-native-color-toolkit';
 76 | 
 77 | ...
 78 | 
 79 | <View  style={{justifyContent:  'center', alignItems:  'center'}}>
 80 | 	<View  style={[styles.box, {backgroundColor: '#2196F3'}]} />
 81 | 	<Text  style={styles.subtitle}>Original color</Text>
 82 | </View>
 83 | <View  style={{justifyContent:  'center', alignItems:  'center'}}>
 84 | 	<View  style={[styles.box, {backgroundColor: darken('#2196F3', 0.5)}]} />
 85 | 	<Text  style={styles.subtitle}>Modified color</Text>
 86 | </View>
 87 | 
 88 | ...
 89 | ```
 90 | ### Result
 91 | ![enter image description here](https://i.imgur.com/mw6kr5A.png)
 92 | 
 93 | ## desaturate(color: string,  amount: number)
 94 | A function that returns a desaturated color given a color and a percentage (from 0 to 1).
 95 | 
 96 | ### Example
 97 | ```jsx
 98 | import { desaturate } from  'react-native-color-toolkit';
 99 | 
100 | ...
101 | 
102 | <View  style={{justifyContent:  'center', alignItems:  'center'}}>
103 | 	<View  style={[styles.box, {backgroundColor: '#2196F3'}]} />
104 | 	<Text  style={styles.subtitle}>Original color</Text>
105 | </View>
106 | <View  style={{justifyContent:  'center', alignItems:  'center'}}>
107 | 	<View  style={[styles.box, {backgroundColor: desaturate('#2196F3', 0.5)}]} />
108 | 	<Text  style={styles.subtitle}>Modified color</Text>
109 | </View>
110 | 
111 | ...
112 | ```
113 | ### Result
114 | ![enter image description here](https://i.imgur.com/kymGh6b.png)
115 | 
116 | ## greyscale(color: string)
117 | A function that returns a greyscaled color given a color.
118 | 
119 | ### Example
120 | ```jsx
121 | import { greyscale } from  'react-native-color-toolkit';
122 | 
123 | ...
124 | 
125 | <View  style={{justifyContent:  'center', alignItems:  'center'}}>
126 | 	<View  style={[styles.box, {backgroundColor: '#2196F3'}]} />
127 | 	<Text  style={styles.subtitle}>Original color</Text>
128 | </View>
129 | <View  style={{justifyContent:  'center', alignItems:  'center'}}>
130 | 	<View  style={[styles.box, {backgroundColor: greyscale('#2196F3')}]} />
131 | 	<Text  style={styles.subtitle}>Modified color</Text>
132 | </View>
133 | 
134 | ...
135 | ```
136 | ### Result
137 | ![enter image description here](https://i.imgur.com/4izxvDg.png)
138 | 
139 | ## lighten(color: string,  amount: number)
140 | A function that returns a lightened color given a color and a percentage (from 0 to 1).
141 | 
142 | ### Example
143 | ```jsx
144 | import { lighten } from  'react-native-color-toolkit';
145 | 
146 | ...
147 | 
148 | <View  style={{justifyContent:  'center', alignItems:  'center'}}>
149 | 	<View  style={[styles.box, {backgroundColor: '#2196F3'}]} />
150 | 	<Text  style={styles.subtitle}>Original color</Text>
151 | </View>
152 | <View  style={{justifyContent:  'center', alignItems:  'center'}}>
153 | 	<View  style={[styles.box, {backgroundColor: lighten('#2196F3', 0.3)}]} />
154 | 	<Text  style={styles.subtitle}>Modified color</Text>
155 | </View>
156 | 
157 | ...
158 | ```
159 | ### Result
160 | ![enter image description here](https://i.imgur.com/MgvSPUL.png)
161 | 
162 | ## saturate(color: string,  amount: number)
163 | A function that returns a saturated color given a color and a percentage (from 0 to 1).
164 | 
165 | ### Example
166 | ```jsx
167 | import { lighten } from  'react-native-color-toolkit';
168 | 
169 | ...
170 | 
171 | <View  style={{justifyContent:  'center', alignItems:  'center'}}>
172 | 	<View  style={[styles.box, {backgroundColor: '#2196F3'}]} />
173 | 	<Text  style={styles.subtitle}>Original color</Text>
174 | </View>
175 | <View  style={{justifyContent:  'center', alignItems:  'center'}}>
176 | 	<View  style={[styles.box, {backgroundColor: lighten('#2196F3', 0.3)}]} />
177 | 	<Text  style={styles.subtitle}>Modified color</Text>
178 | </View>
179 | 
180 | ...
181 | ```
182 | ### Result
183 | ![enter image description here](https://i.imgur.com/hUy6M9Q.png)
184 | 
185 | 
186 | <br />
187 | 
188 | # Combination Functions
189 | 
190 | ## analogous(color: string)
191 | A function that returns an array (length = 3) of colors that are analogous to the given color.
192 | 
193 | ### Example
194 | ```jsx
195 | import { analogous } from  'react-native-color-toolkit';
196 | 
197 | ...
198 | 
199 | <View  style={{justifyContent:  'center', alignItems:  'center'}}>
200 | 	<View style={[styles.box, {backgroundColor:  analogous('#880E4F')[0]}]}/>
201 | 	<Text  style={styles.subtitle}>Original color</Text>
202 | </View>
203 | <View  style={styles.mainRow}>
204 | 	<View  style={{justifyContent:  'center', alignItems:  'center'}}>
205 | 		<View style={[styles.box, {backgroundColor:  analogous('#880E4F')[1]}]}/>
206 | 		<Text  style={styles.subtitle}>Analogous color</Text>
207 | 	</View>
208 | 	<View  style={{justifyContent:  'center', alignItems:  'center'}}>
209 | 		<View  style={[styles.box, {backgroundColor:  analogous('#880E4F')[2]}]}/>
210 | 		<Text  style={styles.subtitle}>Analogous color</Text>
211 | 	</View>
212 | </View>
213 | ...
214 | ```
215 | ### Result
216 | ![enter image description here](https://i.imgur.com/JnDirHJ.png)
217 | 
218 | ## complement(color: string)
219 | A function that returns a complement of a given color.
220 | 
221 | ### Example
222 | ```jsx
223 | import { complement } from  'react-native-color-toolkit';
224 | 
225 | ...
226 | 
227 | <View  style={{justifyContent:  'center', alignItems:  'center'}}>
228 | 	<View  style={[styles.box, {backgroundColor: '#1E88E5'}]} />
229 | 	<Text  style={styles.subtitle}>Original color</Text>
230 | </View>
231 | <View  style={{justifyContent:  'center', alignItems:  'center'}}>
232 | 	<View  style={[styles.box, {backgroundColor: complement('#1E88E5')}]} />
233 | 	<Text  style={styles.subtitle}>Modified color</Text>
234 | </View>
235 | 
236 | ...
237 | ```
238 | ### Result
239 | ![enter image description here](https://i.imgur.com/tEdKDIo.png)
240 | 
241 | ## monochromatic(color: string)
242 | A function that returns an array (length = 6) of colors that are monochromatic to the given color.
243 | 
244 | ### Example
245 | ```jsx
246 | import { monochromatic } from  'react-native-color-toolkit';
247 | 
248 | ...
249 | 
250 | <View  style={{justifyContent:  'center', alignItems:  'center'}}>
251 | 	<View style={[styles.box, {backgroundColor:  monochromatic('#7E57C2')[0]}]}/>
252 | 	<Text  style={styles.subtitle}>Original color</Text>
253 | </View>
254 | <View  style={styles.mainRow}>
255 | 	<View  style={{justifyContent:  'center', alignItems:  'center'}}>
256 | 		<View style={[styles.box, {backgroundColor:  monochromatic('#7E57C2')[1]}]}/>
257 | 		<Text  style={styles.subtitle}>Monochromatic color</Text>
258 | 	</View>
259 | 	<View  style={{justifyContent:  'center', alignItems:  'center'}}>
260 | 		<View  style={[styles.box, {backgroundColor:  monochromatic('#7E57C2')[2]}]}/>
261 | 		<Text  style={styles.subtitle}>Monochromatic color</Text>
262 | 	</View>
263 | </View>
264 | 
265 | <View  style={styles.mainRow}>
266 | 	<View  style={{justifyContent:  'center', alignItems:  'center'}}>
267 | 		<View style={[styles.box, {backgroundColor:  monochromatic('#7E57C2')[3]}]}/>
268 | 		<Text  style={styles.subtitle}>Monochromatic color</Text>
269 | 	</View>
270 | 	<View  style={{justifyContent:  'center', alignItems:  'center'}}>
271 | 		<View  style={[styles.box, {backgroundColor:  monochromatic('#7E57C2')[4]}]}/>
272 | 		<Text  style={styles.subtitle}>Monochromatic color</Text>
273 | 	</View>
274 | </View>
275 | ...
276 | ```
277 | ### Result
278 | ![enter image description here](https://i.imgur.com/Z44YiDS.png)
279 | 
280 | ## splitComplementary(color: string)
281 | A function that returns an array (length = 3) of colors that are split complement to the given color.
282 | 
283 | ### Example
284 | ```jsx
285 | import { splitComplementary } from  'react-native-color-toolkit';
286 | 
287 | ...
288 | 
289 | <View  style={{justifyContent:  'center', alignItems:  'center'}}>
290 | 	<View style={[styles.box, {backgroundColor:  splitComplementary('#01579B')[0]}]}/>
291 | 	<Text  style={styles.subtitle}>Original color</Text>
292 | </View>
293 | <View  style={styles.mainRow}>
294 | 	<View  style={{justifyContent:  'center', alignItems:  'center'}}>
295 | 		<View style={[styles.box, {backgroundColor:  splitComplementary('#01579B')[1]}]}/>
296 | 		<Text  style={styles.subtitle}>Modified color</Text>
297 | 	</View>
298 | 	<View  style={{justifyContent:  'center', alignItems:  'center'}}>
299 | 		<View  style={[styles.box, {backgroundColor:  splitComplementary('#01579B')[2]}]}/>
300 | 		<Text  style={styles.subtitle}>Modified color</Text>
301 | 	</View>
302 | </View>
303 | ...
304 | ```
305 | ### Result
306 | ![enter image description here](https://i.imgur.com/WUblWwI.png)
307 | 
308 | ## tetrad(color: string)
309 | A function that returns an array (length = 4) of colors that that are tetrad to the given color.
310 | 
311 | ### Example
312 | ```jsx
313 | import { tetrad } from  'react-native-color-toolkit';
314 | 
315 | ...
316 | 
317 | <View  style={{justifyContent:  'center', alignItems:  'center'}}>
318 | 	<View style={[styles.box, {backgroundColor:  tetrad('#00BCD4')[0]}]}/>
319 | 	<Text  style={styles.subtitle}>Original color</Text>
320 | </View>
321 | 
322 | <View  style={styles.mainRow}>
323 | 	<View  style={{justifyContent:  'center', alignItems:  'center'}}>
324 | 		<View style={[styles.box, {backgroundColor:  tetrad('#00BCD4')[1]}]}/>
325 | 		<Text  style={styles.subtitle}>Tetrad color</Text>
326 | 	</View>
327 | 	<View  style={{justifyContent:  'center', alignItems:  'center'}}>
328 | 		<View  style={[styles.box, {backgroundColor:  tetrad('#00BCD4')[2]}]}/>
329 | 		<Text  style={styles.subtitle}>Tetrad color</Text>
330 | 	</View>
331 | 	<View  style={{justifyContent:  'center', alignItems:  'center'}}>
332 | 		<View  style={[styles.box, {backgroundColor:  tetrad('#00BCD4')[3]}]}/>
333 | 		<Text  style={styles.subtitle}>Tetrad color</Text>
334 | 	</View>
335 | 	
336 | </View>
337 | ...
338 | ```
339 | ### Result
340 | ![enter image description here](https://i.imgur.com/Phl7QTE.png)
341 | 
342 | ## triad(color: string)
343 | A function that returns an array (length = 3) of colors that that are tetrad to the given color.
344 | 
345 | ### Example
346 | ```jsx
347 | import { triad } from  'react-native-color-toolkit';
348 | 
349 | ...
350 | 
351 | <View  style={{justifyContent:  'center', alignItems:  'center'}}>
352 | 	<View style={[styles.box, {backgroundColor:  triad('#E53935')[0]}]}/>
353 | 	<Text  style={styles.subtitle}>Original color</Text>
354 | </View>
355 | 
356 | <View  style={styles.mainRow}>
357 | 	<View  style={{justifyContent:  'center', alignItems:  'center'}}>
358 | 		<View style={[styles.box, {backgroundColor:  triad('#E53935')[1]}]}/>
359 | 		<Text  style={styles.subtitle}>Triad color</Text>
360 | 	</View>
361 | 	<View  style={{justifyContent:  'center', alignItems:  'center'}}>
362 | 		<View  style={[styles.box, {backgroundColor:  triad('#E53935')[2]}]}/>
363 | 		<Text  style={styles.subtitle}>Triad color</Text>
364 | 	</View>
365 | </View>
366 | ...
367 | ```
368 | ### Result
369 | ![enter image description here](https://i.imgur.com/KivIKim.png)
370 | 
371 | <br />
372 | 
373 | # Conversion Functions
374 | 
375 | | name  | args | return | 
376 | |-----|-----|-----|
377 | | `hexToPercentageRgb ` | color: string (hexadecimal) | An object with r,g,b percentage values.
378 | | `hexToRgb` | color: string (hexadecimal) | An object with r,g,b values.
379 | | `hslToHex` | h: number, s: number, l: number| A string with the hex value.
380 | | `hueToRgb` | p: number, q: number, t: number | The rgb value.
381 | | `rgbToHex` | r: number, g: number, b: number | The hexadecimal value from a rgb color.
382 | | `rgbToHsl` | r: number, g: number, b: number | The HSL value from a rgb color.
383 | | `singleHex` | x: number | The hexadecimal value of a given number.
384 | 
385 | 
386 | <br />
387 | 
388 | # Utility Functions
389 | 
390 | | name  | args | return | 
391 | |-----|-----|-----|
392 | | `getBrightness ` | color: string (hexadecimal) | The brightness number of the given color.
393 | | `getHexColorAlpha` | hex: string (hexadecimal) | The alpha number of the given color.
394 | | `setHexColorAlpha` | color: string (hexadecimal), alpha: number (0 to 1) | The hexadecimal value with the given alpha value.
395 | | `isDark` | color: string (hexadecimal)| true if the color is dark, false otherwise.
396 | | `isLight` | color: string (hexadecimal) | true if the color is light, false otherwise.
397 | | `random` | nope | A random hex color.
398 | | `rgbToHsl` | r: number, g: number, b: number | The HSL value from a rgb color.
399 | | `singleHex` | x: number | The hexadecimal value of a given number.
400 | 
401 | 
402 | <br />
403 | 
404 | # Material Colors Pallete
405 | 
406 | You can use material color pallete out of the box like in the example below:
407 | 
408 | ```jsx
409 | import { Colors } from  'react-native-color-toolkit';
410 | 
411 | ...
412 | 
413 | <View  style={{justifyContent:  'center', alignItems:  'center'}}>
414 | 	<View style={[styles.box, {backgroundColor:  Colors.red[500]}]}/>
415 | 	<Text  style={styles.subtitle}>Red 500</Text>
416 | </View>
417 | <View  style={styles.mainRow}>
418 | 	<View  style={{justifyContent:  'center', alignItems:  'center'}}>
419 | 		<View style={[styles.box, {backgroundColor:  Colors.red[300]}]}/>
420 | 		<Text  style={styles.subtitle}>Red 300</Text>
421 | 	</View>
422 | 	<View  style={{justifyContent:  'center', alignItems:  'center'}}>
423 | 		<View  style={[styles.box, {backgroundColor:  Colors.red[700]}]}/>
424 | 		<Text  style={styles.subtitle}>Red 700</Text>
425 | 	</View>
426 | </View>
427 | 
428 | <View  style={styles.mainRow}>
429 | 	<View  style={{justifyContent:  'center', alignItems:  'center'}}>
430 | 		<View style={[styles.box, {backgroundColor:  Colors.red.A400}]}/>
431 | 		<Text  style={styles.subtitle}>Red A400</Text>
432 | 	</View>
433 | 	<View  style={{justifyContent:  'center', alignItems:  'center'}}>
434 | 		<View  style={[styles.box, {backgroundColor:  Colors.red.A700}]}/>
435 | 		<Text  style={styles.subtitle}>Red A700</Text>
436 | 	</View>
437 | </View>
438 | ...
439 | ```
440 | ### Result
441 | ![enter image description here](https://i.imgur.com/KwYV5Im.png)
442 | 
443 | 
444 | <br />
445 | 
446 | # Contributing
447 | 
448 | Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are **greatly appreciated**.
449 | 
450 | 1. Fork the Project
451 | 2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
452 | 3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
453 | 4. Push to the Branch (`git push origin feature/AmazingFeature`)
454 | 5. Open a Pull Request
455 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-native-color-toolkit",
 3 |   "version": "1.3.1",
 4 |   "description": "A well-tested library written in typescript to with a lot of tools to help mobile developers who care about color.",
 5 |   "homepage": "https://github.com/juniorklawa/react-native-color-toolkit",
 6 |   "author": "Everaldo Junior <juniorklawa10@gmail.com>",
 7 |   "main": "src/index.ts",
 8 |   "scripts": {
 9 |     "test": "jest",
10 |     "test:watch": "jest --watch",
11 |     "build": "npx tsx-bundler src/index.tsx --outDir dist"
12 |   },
13 |   "keywords": [
14 |     "colors",
15 |     "react-native",
16 |     "manipulation",
17 |     "filters",
18 |     "darken",
19 |     "lighten",
20 |     "tint",
21 |     "shade",
22 |     "blend",
23 |     "mix",
24 |     "tinting",
25 |     "shading",
26 |     "blending",
27 |     "mixing"
28 |   ],
29 |   "license": "MIT",
30 |   "devDependencies": {
31 |     "@types/jest": "^27.4.1",
32 |     "jest": "^27.5.1",
33 |     "ts-jest": "^27.1.4",
34 |     "ts-node": "^10.7.0",
35 |     "typescript": "^4.6.2"
36 |   },
37 |   "jest": {
38 |     "transform": {
39 |       "^.+\\.tsx?$": "ts-jest"
40 |     },
41 |     "moduleFileExtensions": [
42 |       "ts",
43 |       "tsx",
44 |       "js",
45 |       "jsx",
46 |       "json"
47 |     ]
48 |   }
49 | }
50 | 


--------------------------------------------------------------------------------
/src/colors/index.ts:
--------------------------------------------------------------------------------
  1 | const Colors = {
  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 |   grey: {
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 | };
297 | 
298 | export default Colors;
299 | 


--------------------------------------------------------------------------------
/src/combination/analogous.spec.ts:
--------------------------------------------------------------------------------
 1 | import analogous from './analogous';
 2 | 
 3 | describe('analogous function', () => {
 4 |   it('should return an array of analogous colors, given a color', () => {
 5 |     const colors = analogous('#2196F3');
 6 | 
 7 |     expect(colors).toEqual(['#2196F3', '#212df3', '#21f3e7']);
 8 |   });
 9 | });
10 | 


--------------------------------------------------------------------------------
/src/combination/analogous.ts:
--------------------------------------------------------------------------------
 1 | import hexToRgb from '../conversion/hexToRgb';
 2 | import hslToHex from '../conversion/hslToHex';
 3 | import rgbToHsl from '../conversion/rgbToHsl';
 4 | 
 5 | /**
 6 |  * @param  {String} color A 6 character hex color.
 7 |  * @return {Array} An array of colors that are analogous to the given color.
 8 |  */
 9 | const analogous = (color: string) => {
10 |   const { r, g, b } = hexToRgb(color);
11 |   const { h, s, l } = rgbToHsl(r, g, b);
12 | 
13 |   const primaryColor = hslToHex((h + 30) % 360, s, l);
14 |   const secondaryColor = hslToHex((h + 330) % 360, s, l);
15 |   return [color, primaryColor, secondaryColor];
16 | };
17 | 
18 | export default analogous;
19 | 


--------------------------------------------------------------------------------
/src/combination/complement.spec.ts:
--------------------------------------------------------------------------------
 1 | import complement from './complement';
 2 | 
 3 | describe('complement function', () => {
 4 |   it('should return a complement of a given color', () => {
 5 |     const complementColor = complement('#2196F3');
 6 | 
 7 |     expect(complementColor).toEqual('#f37e21');
 8 |   });
 9 | });
10 | 


--------------------------------------------------------------------------------
/src/combination/complement.ts:
--------------------------------------------------------------------------------
 1 | import hexToRgb from '../conversion/hexToRgb';
 2 | import hslToHex from '../conversion/hslToHex';
 3 | import rgbToHsl from '../conversion/rgbToHsl';
 4 | 
 5 | /**
 6 |  * @param  {String} color A 6 character hex color.
 7 |  * @return {String} Returns the complement of a color.
 8 |  */
 9 | const complement = (color: string) => {
10 |   const { r, g, b } = hexToRgb(color);
11 |   const { h, s, l } = rgbToHsl(r, g, b);
12 |   const newHue = (h + 180) % 360;
13 |   const newColor = hslToHex(newHue, s, l);
14 |   return newColor;
15 | };
16 | 
17 | export default complement;
18 | 


--------------------------------------------------------------------------------
/src/combination/monochromatic.spec.ts:
--------------------------------------------------------------------------------
 1 | import monochromatic from './monochromatic';
 2 | 
 3 | describe('monochromatic function', () => {
 4 |   it('should return an array of monochromatic colors, given a color', () => {
 5 |     const colors = monochromatic('#2196F3');
 6 | 
 7 |     expect(colors).toEqual([
 8 |       '#2196f3',
 9 |       '#0c7fda',
10 |       '#0965af',
11 |       '#074c83',
12 |       '#053357',
13 |       '#02192c',
14 |     ]);
15 |   });
16 | });
17 | 


--------------------------------------------------------------------------------
/src/combination/monochromatic.ts:
--------------------------------------------------------------------------------
 1 | import hexToRgb from '../conversion/hexToRgb';
 2 | import hslToHex from '../conversion/hslToHex';
 3 | import rgbToHsl from '../conversion/rgbToHsl';
 4 | import getNewPercentage from '../utilities/getRelativePercentage';
 5 | 
 6 | /**
 7 |  * @param  {String} color A 6 character hex color.
 8 |  * @return {Array} An array of colors that are monochromatic to the given color.
 9 |  */
10 | const monochromatic = (color: string) => {
11 |   const pieces = 6;
12 |   const { r, g, b } = hexToRgb(color);
13 |   const { h, s, l } = rgbToHsl(r, g, b);
14 | 
15 |   const newHsl = { h, s, l };
16 |   const colorsArr = [];
17 |   for (let i = 0; i < pieces; i++) {
18 |     newHsl.l = getNewPercentage((1 / pieces) * i, l, 'darken');
19 |     colorsArr.push(hslToHex(newHsl.h, newHsl.s, newHsl.l));
20 |   }
21 |   return colorsArr;
22 | };
23 | 
24 | export default monochromatic;
25 | 


--------------------------------------------------------------------------------
/src/combination/splitComplement.spec.ts:
--------------------------------------------------------------------------------
 1 | import splitComplementary from './splitComplement';
 2 | 
 3 | describe('splitComplement function', () => {
 4 |   it('should return an array of split complmenets colors, given a color', () => {
 5 |     const colors = splitComplementary('#2196F3');
 6 | 
 7 |     expect(colors).toEqual(['#2196F3', '#f3212d', '#f3e321']);
 8 |   });
 9 | });
10 | 


--------------------------------------------------------------------------------
/src/combination/splitComplement.ts:
--------------------------------------------------------------------------------
 1 | import hexToRgb from '../conversion/hexToRgb';
 2 | import hslToHex from '../conversion/hslToHex';
 3 | import rgbToHsl from '../conversion/rgbToHsl';
 4 | 
 5 | /**
 6 |  * @param  {String} color A 6 character hex color.
 7 |  * @return {Array} An array of colors that are split complement to the given color.
 8 |  */
 9 | const splitComplementary = (color: string) => {
10 |   const { r, g, b } = hexToRgb(color);
11 |   const { h, s, l } = rgbToHsl(r, g, b);
12 | 
13 |   const secondaryColor = hslToHex((h + 150) % 360, s, l);
14 |   const terciaryColor = hslToHex((h + 209) % 360, s, l);
15 | 
16 |   return [color, secondaryColor, terciaryColor];
17 | };
18 | 
19 | export default splitComplementary;
20 | 


--------------------------------------------------------------------------------
/src/combination/tetrad.spec.ts:
--------------------------------------------------------------------------------
 1 | import tetrad from './tetrad';
 2 | 
 3 | describe('tetrad function', () => {
 4 |   it('should return an array of tetrad colors, given a color', () => {
 5 |     const colors = tetrad('#2196F3');
 6 | 
 7 |     expect(colors).toEqual(['#2196F3', '#e721f3', '#f37e21', '#2df321']);
 8 |   });
 9 | });
10 | 


--------------------------------------------------------------------------------
/src/combination/tetrad.ts:
--------------------------------------------------------------------------------
 1 | import hexToRgb from '../conversion/hexToRgb';
 2 | import hslToHex from '../conversion/hslToHex';
 3 | import rgbToHsl from '../conversion/rgbToHsl';
 4 | 
 5 | /**
 6 |  * @param  {String} color A 6 character hex color.
 7 |  * @return {Array} An array of colors that are tetrad to the given color.
 8 |  */
 9 | const tetrad = (color: string) => {
10 |   const { r, g, b } = hexToRgb(color);
11 |   const { h, s, l } = rgbToHsl(r, g, b);
12 |   const newHue = h;
13 | 
14 |   const secondaryColor = hslToHex((newHue + 90) % 360, s, l);
15 |   const terciaryColor = hslToHex((newHue + 180) % 360, s, l);
16 |   const quaternaryColor = hslToHex((newHue + 270) % 360, s, l);
17 | 
18 |   return [color, secondaryColor, terciaryColor, quaternaryColor];
19 | };
20 | 
21 | export default tetrad;
22 | 


--------------------------------------------------------------------------------
/src/combination/triad.spec.ts:
--------------------------------------------------------------------------------
 1 | import triad from './triad';
 2 | 
 3 | describe('triad function', () => {
 4 |   it('should return an array of triad colors, given a color', () => {
 5 |     const colors = triad('#2196F3');
 6 | 
 7 |     expect(colors).toEqual(['#2196F3', '#f32196', '#96f321']);
 8 |   });
 9 | });
10 | 


--------------------------------------------------------------------------------
/src/combination/triad.ts:
--------------------------------------------------------------------------------
 1 | import hexToRgb from '../conversion/hexToRgb';
 2 | import hslToHex from '../conversion/hslToHex';
 3 | import rgbToHsl from '../conversion/rgbToHsl';
 4 | 
 5 | /**
 6 |  * @param  {String} color A 6 character hex color.
 7 |  * @return {Array} An array of colors that are triad to the given color.
 8 |  */
 9 | const triad = (color: string) => {
10 |   const { r, g, b } = hexToRgb(color);
11 |   const { h, s, l } = rgbToHsl(r, g, b);
12 | 
13 |   const secondaryColor = hslToHex((h + 120) % 360, s, l);
14 |   const terciaryColor = hslToHex((h + 240) % 360, s, l);
15 |   return [color, secondaryColor, terciaryColor];
16 | };
17 | 
18 | export default triad;
19 | 


--------------------------------------------------------------------------------
/src/conversion/hexToPercentageRgb.spec.ts:
--------------------------------------------------------------------------------
 1 | import hexToPercentageRgb from './hexToPercentageRgb';
 2 | 
 3 | describe('hexToPercentageRgb function', () => {
 4 |   it('should return an object with r,g,b properties with correct percentage values', () => {
 5 |     const rgbColor = hexToPercentageRgb('#2196F3');
 6 | 
 7 |     expect(rgbColor).toEqual({ r: 12.94, g: 58.82, b: 95.29 });
 8 |   });
 9 | });
10 | 


--------------------------------------------------------------------------------
/src/conversion/hexToPercentageRgb.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @param  {String} color A 6 character hex color.
 3 |  * @return {Object} An object with the following properties:
 4 |  * - r: The red value in percentage of the color.
 5 |  * - g: The green value in percentage of the color.
 6 |  * - b: The blue value in percentage of the color.
 7 |  */
 8 | 
 9 | const roundPercentage = (value: number) => {
10 |   return Number(value.toFixed(2));
11 | };
12 | 
13 | const hexToPercentageRgb = (color: string) => {
14 |   const r = roundPercentage((parseInt(color.slice(1, 3), 16) / 255) * 100);
15 |   const g = roundPercentage((parseInt(color.slice(3, 5), 16) / 255) * 100);
16 |   const b = roundPercentage((parseInt(color.slice(5, 7), 16) / 255) * 100);
17 | 
18 |   return {
19 |     r,
20 |     g,
21 |     b,
22 |   };
23 | };
24 | export default hexToPercentageRgb;
25 | 


--------------------------------------------------------------------------------
/src/conversion/hexToRgb.spec.ts:
--------------------------------------------------------------------------------
 1 | import hexToRgb from './hexToRgb';
 2 | 
 3 | describe('hexToRgb function', () => {
 4 |   it('should return an object with r,g,b properties with correct values', () => {
 5 |     const rgbColor = hexToRgb('#2196F3');
 6 | 
 7 |     expect(rgbColor).toEqual({ r: 33, g: 150, b: 243 });
 8 |   });
 9 | });
10 | 


--------------------------------------------------------------------------------
/src/conversion/hexToRgb.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @param  {String} color A 6 character hex color.
 3 |  * @return {Object} An object with the following properties:
 4 |  * - r: The red value of the color.
 5 |  * - g: The green value of the color.
 6 |  * - b: The blue value of the color.
 7 |  */
 8 | const hexToRgb = (color: string) => {
 9 |   const r = parseInt(color.slice(1, 3), 16);
10 |   const g = parseInt(color.slice(3, 5), 16);
11 |   const b = parseInt(color.slice(5, 7), 16);
12 | 
13 |   return {
14 |     r,
15 |     g,
16 |     b,
17 |   };
18 | };
19 | 
20 | export default hexToRgb;
21 | 


--------------------------------------------------------------------------------
/src/conversion/hslToHex.spec.ts:
--------------------------------------------------------------------------------
 1 | import hslToHex from './hslToHex';
 2 | 
 3 | describe('hslToHex function', () => {
 4 |   it('should return a string with the correct hex color value', () => {
 5 |     const hexColor = hslToHex(206, 89, 54);
 6 | 
 7 |     expect(hexColor).toEqual('#2198f2');
 8 |   });
 9 | });
10 | 


--------------------------------------------------------------------------------
/src/conversion/hslToHex.ts:
--------------------------------------------------------------------------------
 1 | import hueToRgb from './hueToRgb';
 2 | import toHex from './singleHex';
 3 | 
 4 | /**
 5 |  * Converts an HSL color value to HEX.
 6 |  * @param  {Number} h The hue value.
 7 |  * @param  {Number} s The saturation value.
 8 |  * @param  {Number} l The lightness value.
 9 |  * @return {String} The HEX color value.
10 |  */
11 | const hslToHex = (h: number, s: number, l: number) => {
12 |   h /= 360;
13 |   s /= 100;
14 |   l /= 100;
15 | 
16 |   h = Math.min(h, 1);
17 |   s = Math.min(s, 1);
18 |   l = Math.min(l, 1);
19 | 
20 |   let r, g, b;
21 | 
22 |   if (s === 0) {
23 |     r = g = b = l;
24 |   } else {
25 |     const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
26 |     const p = 2 * l - q;
27 |     r = hueToRgb(p, q, h + 1 / 3);
28 |     g = hueToRgb(p, q, h);
29 |     b = hueToRgb(p, q, h - 1 / 3);
30 |   }
31 | 
32 |   return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
33 | };
34 | 
35 | export default hslToHex;
36 | 


--------------------------------------------------------------------------------
/src/conversion/hueToRgb.spec.ts:
--------------------------------------------------------------------------------
 1 | import hueToRgb from './hueToRgb';
 2 | 
 3 | describe('hueToRgb function', () => {
 4 |   it('should return a correct number value ', () => {
 5 |     const rgbColor = hueToRgb(120, 140, 200);
 6 | 
 7 |     expect(rgbColor).toEqual(120);
 8 |   });
 9 | });
10 | 


--------------------------------------------------------------------------------
/src/conversion/hueToRgb.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Converts HUE amount to one of RGB colors.
 3 |  * @return {Number} A value betwenn 0 and 255.
 4 |  */
 5 | const hueToRgb = (p: number, q: number, t: number) => {
 6 |   if (t < 0) {
 7 |     t += 1;
 8 |   }
 9 |   if (t > 1) {
10 |     t -= 1;
11 |   }
12 |   if (t < 1 / 6) {
13 |     return p + (q - p) * 6 * t;
14 |   }
15 |   if (t < 1 / 2) {
16 |     return q;
17 |   }
18 |   if (t < 2 / 3) {
19 |     return p + (q - p) * (2 / 3 - t) * 6;
20 |   }
21 |   return p;
22 | };
23 | 
24 | export default hueToRgb;
25 | 


--------------------------------------------------------------------------------
/src/conversion/rgbToHex.spec.ts:
--------------------------------------------------------------------------------
 1 | import rgbToHex from './rgbToHex';
 2 | 
 3 | describe('rgbToHex function', () => {
 4 |   it('should return a string with correct hex value', () => {
 5 |     const hexColor = rgbToHex(33, 150, 242);
 6 | 
 7 |     expect(hexColor).toEqual('#2196f2');
 8 |   });
 9 | });
10 | 


--------------------------------------------------------------------------------
/src/conversion/rgbToHex.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Convert an RGB color to a hexadecimal color.
 3 |  * @param  {Number} r The red value of the color.
 4 |  * @param  {Number} g The green value of the color.
 5 |  * @param  {Number} b The blue value of the color.
 6 |  * @return {String} The hexadecimal color.
 7 |  */
 8 | const rgbToHex = (r: number, g: number, b: number): string => {
 9 |   return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
10 | };
11 | 
12 | export default rgbToHex;
13 | 


--------------------------------------------------------------------------------
/src/conversion/rgbToHsl.spec.ts:
--------------------------------------------------------------------------------
 1 | import rgbToHsl from './rgbToHsl';
 2 | 
 3 | describe('rgbToHsl function', () => {
 4 |   it('should return an object with correct hsl values', () => {
 5 |     const hslColor = rgbToHsl(33, 150, 242);
 6 | 
 7 |     expect(hslColor).toEqual({
 8 |       h: 206.41148325358853,
 9 |       s: 88.93617021276596,
10 |       l: 53.92156862745098,
11 |     });
12 |   });
13 | });
14 | 


--------------------------------------------------------------------------------
/src/conversion/rgbToHsl.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Convert an RGB color to a HSL color.
 3 |  * @param  {Number} r The red value of the color.
 4 |  * @param  {Number} g The green value of the color.
 5 |  * @param  {Number} b The blue value of the color.
 6 |  * @return {Object} An object with the following properties:
 7 |  * - h: The hue value of the color.
 8 |  * - s: The saturation value of the color.
 9 |  * - l: The lightness value of the color.
10 |  */
11 | const rgbToHsl = (r: number, g: number, b: number) => {
12 |   r /= 255;
13 |   g /= 255;
14 |   b /= 255;
15 | 
16 |   const max = Math.max(r, g, b);
17 |   const min = Math.min(r, g, b);
18 |   const h =
19 |     max === min
20 |       ? 0
21 |       : max === r
22 |       ? (g - b) / (max - min)
23 |       : max === g
24 |       ? 2 + (b - r) / (max - min)
25 |       : 4 + (r - g) / (max - min);
26 |   const l = (max + min) / 2;
27 |   const s =
28 |     max === min
29 |       ? 0
30 |       : l < 0.5
31 |       ? (max - min) / (2 * l)
32 |       : (max - min) / (2 - 2 * l);
33 | 
34 |   return { h: h * 60, s: s * 100, l: l * 100 };
35 | };
36 | 
37 | export default rgbToHsl;
38 | 


--------------------------------------------------------------------------------
/src/conversion/singleHex.spec.ts:
--------------------------------------------------------------------------------
 1 | import singleHex from './singleHex';
 2 | 
 3 | describe('singleHex function', () => {
 4 |   it('should return a string with correct hex value', () => {
 5 |     const singleHexColor = singleHex(42);
 6 | 
 7 |     expect(singleHexColor).toEqual('29d6');
 8 |   });
 9 | });
10 | 


--------------------------------------------------------------------------------
/src/conversion/singleHex.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Convert an RGB color to a singl hexadecimal color.
 3 |  * @param  {Number} x The value of that color
 4 |  * @return {String} The single hexadecimal color (r or g or b).
 5 |  */
 6 | const singleHex = (x: number) => {
 7 |   const hex = Math.round(x * 255).toString(16);
 8 |   return hex.length === 1 ? `0${hex}` : hex;
 9 | };
10 | 
11 | export default singleHex;
12 | 


--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
 1 | import Colors from './colors';
 2 | import analogous from './combination/analogous';
 3 | import complement from './combination/complement';
 4 | import monochromatic from './combination/monochromatic';
 5 | import splitComplementary from './combination/splitComplement';
 6 | import tetrad from './combination/tetrad';
 7 | import triad from './combination/triad';
 8 | import hexToPercentageRgb from './conversion/hexToPercentageRgb';
 9 | import hexToRgb from './conversion/hexToRgb';
10 | import hslToHex from './conversion/hslToHex';
11 | import hueToRgb from './conversion/hueToRgb';
12 | import rgbToHex from './conversion/rgbToHex';
13 | import rgbToHsl from './conversion/rgbToHsl';
14 | import singleHex from './conversion/singleHex';
15 | import brighten from './modification/brighten';
16 | import darken from './modification/darken';
17 | import desaturate from './modification/desaturate';
18 | import greyscale from './modification/greyscale';
19 | import lighten from './modification/lighten';
20 | import saturate from './modification/saturate';
21 | import getBrightness from './utilities/getBrightness';
22 | import getHexColorAlpha from './utilities/getHexColorAlpha';
23 | import isDark from './utilities/isDark';
24 | import isHexColorValid from './utilities/isHexColorValid';
25 | import isLight from './utilities/isLight';
26 | import random from './utilities/random';
27 | import setHexColorAlpha from './utilities/setHexColorAlpha';
28 | 
29 | export {
30 |   analogous,
31 |   complement,
32 |   monochromatic,
33 |   splitComplementary,
34 |   tetrad,
35 |   triad,
36 |   // Conversion functions
37 |   hexToPercentageRgb,
38 |   hexToRgb,
39 |   hslToHex,
40 |   hueToRgb,
41 |   rgbToHex,
42 |   rgbToHsl,
43 |   singleHex,
44 |   // Modification functions
45 |   brighten,
46 |   darken,
47 |   desaturate,
48 |   greyscale,
49 |   lighten,
50 |   saturate,
51 |   // Utility functions
52 |   getBrightness,
53 |   getHexColorAlpha,
54 |   isDark,
55 |   isHexColorValid,
56 |   isLight,
57 |   random,
58 |   setHexColorAlpha,
59 |   // Colors
60 |   Colors,
61 | };
62 | 


--------------------------------------------------------------------------------
/src/modification/brighten.spec.ts:
--------------------------------------------------------------------------------
 1 | import brighten from './brighten';
 2 | 
 3 | describe('brighten function', () => {
 4 |   it('should return a brighten color given a percentage', () => {
 5 |     const brightenColor = brighten('#2196F3', 0.5);
 6 | 
 7 |     expect(brightenColor).toEqual('#31e1ff');
 8 |   });
 9 | });
10 | 


--------------------------------------------------------------------------------
/src/modification/brighten.ts:
--------------------------------------------------------------------------------
 1 | import hexToRgb from '../conversion/hexToRgb';
 2 | import rgbToHex from '../conversion/rgbToHex';
 3 | 
 4 | /**
 5 |  * @param  {String} color A 6 character hex color.
 6 |  * @param  {Number} amount The amount to brighten the color.
 7 |  * @return {String} The brightened color.
 8 |  */
 9 | const brighten = (color: string, amount = 0.1) => {
10 |   let { r, g, b } = hexToRgb(color);
11 |   r = Math.min(255, r + amount * r);
12 |   g = Math.min(255, g + amount * g);
13 |   b = Math.min(255, b + amount * b);
14 | 
15 |   return rgbToHex(r, g, b);
16 | };
17 | 
18 | export default brighten;
19 | 


--------------------------------------------------------------------------------
/src/modification/darken.spec.ts:
--------------------------------------------------------------------------------
 1 | import darken from './darken';
 2 | 
 3 | describe('darken function', () => {
 4 |   it('should return a darker color given a percentage', () => {
 5 |     const darkenColor = darken('#2196F3', 0.5);
 6 | 
 7 |     expect(darkenColor).toEqual('#074c83');
 8 |   });
 9 | });
10 | 


--------------------------------------------------------------------------------
/src/modification/darken.ts:
--------------------------------------------------------------------------------
 1 | import hexToRgb from '../conversion/hexToRgb';
 2 | import hslToHex from '../conversion/hslToHex';
 3 | import rgbToHsl from '../conversion/rgbToHsl';
 4 | import getNewPercentage from '../utilities/getRelativePercentage';
 5 | 
 6 | /**
 7 |  * @param  {String} color A 6 character hex color.
 8 |  * @param  {Number} amount The amount to brighten the color.
 9 |  * @return {String} The darken color.
10 |  */
11 | const darken = (color: string, amount = 0.1) => {
12 |   const rgbColor = hexToRgb(color);
13 |   const hslColor = rgbToHsl(rgbColor.r, rgbColor.g, rgbColor.b);
14 | 
15 |   hslColor.l = getNewPercentage(amount, hslColor.l, 'darken');
16 |   const newColor = hslToHex(hslColor.h, hslColor.s, hslColor.l);
17 |   return newColor;
18 | };
19 | 
20 | export default darken;
21 | 


--------------------------------------------------------------------------------
/src/modification/desaturate.spec.ts:
--------------------------------------------------------------------------------
 1 | import desaturate from './desaturate';
 2 | 
 3 | describe('desaturate function', () => {
 4 |   it('should return a desaturated color given a percentage', () => {
 5 |     const desaturateColor = desaturate('#2196F3', 0.5);
 6 | 
 7 |     expect(desaturateColor).toEqual('#5590bf');
 8 |   });
 9 | });
10 | 


--------------------------------------------------------------------------------
/src/modification/desaturate.ts:
--------------------------------------------------------------------------------
 1 | import hexToRgb from '../conversion/hexToRgb';
 2 | import hslToHex from '../conversion/hslToHex';
 3 | import rgbToHsl from '../conversion/rgbToHsl';
 4 | import getNewPercentage from '../utilities/getRelativePercentage';
 5 | 
 6 | /**
 7 |  * @param  {String} color A 6 character hex color.
 8 |  * @param  {Number} amount The amount to brighten the color.
 9 |  * @return {String} The desaturated color.
10 |  */
11 | const desaturate = (color: string, amount = 0.1) => {
12 |   const { r, g, b } = hexToRgb(color);
13 |   let { h, s, l } = rgbToHsl(r, g, b);
14 |   const newSaturation = getNewPercentage(amount, s, 'darken');
15 |   const newColor = hslToHex(h, newSaturation, l);
16 |   return newColor;
17 | };
18 | 
19 | export default desaturate;
20 | 


--------------------------------------------------------------------------------
/src/modification/greyscale.spec.ts:
--------------------------------------------------------------------------------
 1 | import greyscale from './greyscale';
 2 | 
 3 | describe('greyscale function', () => {
 4 |   it('should return a greyscaled color', () => {
 5 |     const greyscaleColor = greyscale('#2196F3');
 6 | 
 7 |     expect(greyscaleColor).toEqual('#8a8a8a');
 8 |   });
 9 | });
10 | 


--------------------------------------------------------------------------------
/src/modification/greyscale.ts:
--------------------------------------------------------------------------------
 1 | import { desaturate } from '..';
 2 | 
 3 | /**
 4 |  * @param  {String} color A 6 character hex color.
 5 |  * @return {String} The greyscaled color.
 6 |  */
 7 | const greyscale = (color: string) => {
 8 |   return desaturate(color, 1);
 9 | };
10 | 
11 | export default greyscale;
12 | 


--------------------------------------------------------------------------------
/src/modification/lighten.spec.ts:
--------------------------------------------------------------------------------
 1 | import lighten from './lighten';
 2 | 
 3 | describe('lighten function', () => {
 4 |   it('should return a lightend color given a percentage', () => {
 5 |     const lightenColor = lighten('#2196F3', 0.5);
 6 | 
 7 |     expect(lightenColor).toEqual('#a4d4fa');
 8 |   });
 9 | });
10 | 


--------------------------------------------------------------------------------
/src/modification/lighten.ts:
--------------------------------------------------------------------------------
 1 | import hexToRgb from '../conversion/hexToRgb';
 2 | import hslToHex from '../conversion/hslToHex';
 3 | import rgbToHsl from '../conversion/rgbToHsl';
 4 | import getNewPercentage from '../utilities/getRelativePercentage';
 5 | 
 6 | /**
 7 |  * @param  {String} color A 6 character hex color.
 8 |  * @param  {Number} amount The amount to brighten the color.
 9 |  * @return {String} The lighter color.
10 |  */
11 | const lighten = (color: string, amount = 0.1) => {
12 |   const { r, g, b } = hexToRgb(color);
13 |   const { h, s, l } = rgbToHsl(r, g, b);
14 | 
15 |   const newLuminosity = getNewPercentage(amount, l, 'lighten');
16 |   const newColor = hslToHex(h, s, newLuminosity);
17 |   return newColor;
18 | };
19 | 
20 | export default lighten;
21 | 


--------------------------------------------------------------------------------
/src/modification/saturate.spec.ts:
--------------------------------------------------------------------------------
 1 | import saturate from './saturate';
 2 | 
 3 | describe('saturate function', () => {
 4 |   it('should return a saturated color given a percentage', () => {
 5 |     const saturateColor = saturate('#2196F3', 0.5);
 6 | 
 7 |     expect(saturateColor).toEqual('#1597ff');
 8 |   });
 9 | });
10 | 


--------------------------------------------------------------------------------
/src/modification/saturate.ts:
--------------------------------------------------------------------------------
 1 | import hexToRgb from '../conversion/hexToRgb';
 2 | import hslToHex from '../conversion/hslToHex';
 3 | import rgbToHsl from '../conversion/rgbToHsl';
 4 | import getNewPercentage from '../utilities/getRelativePercentage';
 5 | 
 6 | /**
 7 |  * @param  {String} color A 6 character hex color.
 8 |  * @param  {Number} amount The amount to brighten the color.
 9 |  * @return {String} The saturate color.
10 |  */
11 | const saturate = (color: string, amount = 0.1) => {
12 |   const { r, g, b } = hexToRgb(color);
13 |   const { h, s, l } = rgbToHsl(r, g, b);
14 | 
15 |   const newSaturation = getNewPercentage(amount, s, 'lighten');
16 | 
17 |   const newColor = hslToHex(h, newSaturation, l);
18 |   return newColor;
19 | };
20 | 
21 | export default saturate;
22 | 


--------------------------------------------------------------------------------
/src/utilities/getBrightness.spec.ts:
--------------------------------------------------------------------------------
 1 | import getBrightness from './getBrightness';
 2 | 
 3 | describe('getBrightness function', () => {
 4 |   it('should return the color brightness', () => {
 5 |     const value = getBrightness('#2196F3');
 6 | 
 7 |     expect(value).toEqual(49.259460000000004);
 8 |   });
 9 | });
10 | 


--------------------------------------------------------------------------------
/src/utilities/getBrightness.ts:
--------------------------------------------------------------------------------
 1 | import hexToPercentageRgb from '../conversion/hexToPercentageRgb';
 2 | 
 3 | /**
 4 |  * @param  {String} color A 6 character hex color.
 5 |  * @return {Number} The brightness of the color.
 6 |  */
 7 | const getBrightness = (color: string): number => {
 8 |   const rgb = hexToPercentageRgb(color);
 9 |   const brightness = (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000;
10 |   return brightness;
11 | };
12 | 
13 | export default getBrightness;
14 | 


--------------------------------------------------------------------------------
/src/utilities/getHexColorAlpha.spec.ts:
--------------------------------------------------------------------------------
 1 | import getHexColorAlpha from './getHexColorAlpha';
 2 | 
 3 | describe('getHexColorAlpha function', () => {
 4 |   it('should return a the alpha of a given color', () => {
 5 |     const value = getHexColorAlpha('#2196F350');
 6 | 
 7 |     expect(value).toEqual(80);
 8 |   });
 9 | });
10 | 


--------------------------------------------------------------------------------
/src/utilities/getHexColorAlpha.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @param  {String} color A string hex color.
 3 |  * @return {Number} The alpha of the color.
 4 |  */
 5 | const getHexColorAlpha = (hex: string): number => {
 6 |   const alpha = parseInt(hex.substring(hex.length - 2), 16);
 7 |   return alpha;
 8 | };
 9 | 
10 | export default getHexColorAlpha;
11 | 


--------------------------------------------------------------------------------
/src/utilities/getRelativePercentage.spec.ts:
--------------------------------------------------------------------------------
 1 | import getNewPercentage from './getRelativePercentage';
 2 | 
 3 | describe('getNewPercentage function', () => {
 4 |   it('should return the correct value when in lighten mode', () => {
 5 |     const value = getNewPercentage(0.2, 50, 'lighten');
 6 | 
 7 |     expect(value).toEqual(60);
 8 |   });
 9 |   it('should return the correct value when in darken mode', () => {
10 |     const value = getNewPercentage(0.2, 50, 'darken');
11 | 
12 |     expect(value).toEqual(40);
13 |   });
14 | });
15 | 


--------------------------------------------------------------------------------
/src/utilities/getRelativePercentage.ts:
--------------------------------------------------------------------------------
 1 | const getNewPercentage = (
 2 |   amount: number,
 3 |   relativeTo: number,
 4 |   type: 'lighten' | 'darken'
 5 | ) => {
 6 |   const newPercentage = amount * relativeTo;
 7 |   return type === 'lighten'
 8 |     ? newPercentage + relativeTo
 9 |     : relativeTo - newPercentage;
10 | };
11 | 
12 | export default getNewPercentage;
13 | 


--------------------------------------------------------------------------------
/src/utilities/isDark.spec.ts:
--------------------------------------------------------------------------------
 1 | import isDark from './isDark';
 2 | 
 3 | describe('isDark function', () => {
 4 |   it('should return true if a given color is dark', () => {
 5 |     const value = isDark('#424242');
 6 | 
 7 |     expect(value).toEqual(true);
 8 |   });
 9 | 
10 |   it('should return false if a given color is not dark', () => {
11 |     const value = isDark('#29B6F6');
12 | 
13 |     expect(value).toEqual(false);
14 |   });
15 | });
16 | 


--------------------------------------------------------------------------------
/src/utilities/isDark.ts:
--------------------------------------------------------------------------------
 1 | import getBrightness from './getBrightness';
 2 | 
 3 | /**
 4 |  * @param  {String} color A 6 character hex color.
 5 |  * @return {Boolean} True if the color is dark, false otherwise.
 6 |  */
 7 | const isDark = (color: string): boolean => {
 8 |   return getBrightness(color) < 40;
 9 | };
10 | 
11 | export default isDark;
12 | 


--------------------------------------------------------------------------------
/src/utilities/isHexColorValid.spec.ts:
--------------------------------------------------------------------------------
 1 | import isHexColorValid from './isHexColorValid';
 2 | 
 3 | describe('isHexColorValid function', () => {
 4 |   it('should return true if a hex color is valid', () => {
 5 |     const value = isHexColorValid('#2196F3');
 6 | 
 7 |     expect(value).toEqual(true);
 8 |   });
 9 | 
10 |   it('should return false if a hex color is invalid', () => {
11 |     const value = isHexColorValid('foobar');
12 | 
13 |     expect(value).toEqual(false);
14 |   });
15 | });
16 | 


--------------------------------------------------------------------------------
/src/utilities/isHexColorValid.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @param  {String} color A 6 character hex color.
 3 |  * @return {Boolean} True if the color is valid, false otherwise.
 4 |  */
 5 | const isHexColorValid = (color: string): boolean => {
 6 |   const regex = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i;
 7 |   return regex.test(color);
 8 | };
 9 | 
10 | export default isHexColorValid;
11 | 


--------------------------------------------------------------------------------
/src/utilities/isLight.spec.ts:
--------------------------------------------------------------------------------
 1 | import isLight from './isLight';
 2 | 
 3 | describe('isLight function', () => {
 4 |   it('should return true if a given color is light', () => {
 5 |     const value = isLight('#5C6BC0');
 6 | 
 7 |     expect(value).toEqual(true);
 8 |   });
 9 | 
10 |   it('should return false if a given color is not light', () => {
11 |     const value = isLight('#3E2723');
12 | 
13 |     expect(value).toEqual(false);
14 |   });
15 | });
16 | 


--------------------------------------------------------------------------------
/src/utilities/isLight.ts:
--------------------------------------------------------------------------------
 1 | import isDark from './isDark';
 2 | 
 3 | /**
 4 |  * @param  {String} color A 6 character hex color.
 5 |  * @return {Boolean} True if the color is light, false otherwise.
 6 |  */
 7 | const isLight = (color: string): boolean => {
 8 |   return !isDark(color);
 9 | };
10 | 
11 | export default isLight;
12 | 


--------------------------------------------------------------------------------
/src/utilities/random.spec.ts:
--------------------------------------------------------------------------------
 1 | import isHexColorValid from './isHexColorValid';
 2 | import random from './random';
 3 | 
 4 | describe('random function', () => {
 5 |   it('should return a valid hex color', () => {
 6 |     const randomColor = random();
 7 |     const value = isHexColorValid(randomColor);
 8 | 
 9 |     expect(value).toEqual(true);
10 |   });
11 | });
12 | 


--------------------------------------------------------------------------------
/src/utilities/random.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @return {String} A random HEX color.
 3 |  */
 4 | const random = () => {
 5 |   const randomHex = Math.floor(Math.random() * 16777215).toString(16);
 6 |   return '#' + ('000000' + randomHex).slice(-6);
 7 | };
 8 | 
 9 | export default random;
10 | 


--------------------------------------------------------------------------------
/src/utilities/setHexColorAlpha.spec.ts:
--------------------------------------------------------------------------------
 1 | import setHexColorAlpha from './setHexColorAlpha';
 2 | 
 3 | describe('setHexColorAlpha function', () => {
 4 |   it('should return a hex color with a a given alpha', () => {
 5 |     const value = setHexColorAlpha('#2196F3', 0.5);
 6 | 
 7 |     expect(value).toEqual('#2196F380');
 8 |   });
 9 | });
10 | 


--------------------------------------------------------------------------------
/src/utilities/setHexColorAlpha.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @param  {String} color A hex color.
 3 |  * @param  {Number} alpha The alpha percentage.
 4 |  * @return {String} The hex color with the given alpha value.
 5 |  */
 6 | const setHexColorAlpha = (color: string, alpha: number): string => {
 7 |   const opacity = Math.round(Math.min(Math.max(alpha || 1, 0), 1) * 255);
 8 |   return color + opacity.toString(16).toUpperCase();
 9 | };
10 | 
11 | export default setHexColorAlpha;
12 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es2016",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
 4 |     "module": "commonjs",                                /* Specify what module code is generated. */
 5 |     "outDir": "./dist",                                   /* Specify an output folder for all emitted files. */
 6 |     "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */
 7 |     "forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */
 8 |     "strict": true,                                      /* Enable all strict type-checking options. */
 9 |     "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
10 |   }
11 | }
12 | 


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