Tint and Shade Helpers #100
Conversation
Adds tint and shade helpers. Also fixes some issues with documentation and alphabetizes color imports. Addresses item from #1
Codecov Report
@@ Coverage Diff @@
## master #100 +/- ##
=====================================
Coverage 100% 100%
=====================================
Files 55 57 +2
Lines 324 332 +8
=====================================
+ Hits 324 332 +8
Continue to review full report at Codecov.
|
|
Is tint & shade the same as darken/lighten or different? I find it bit confusing:) |
|
Best explanation I've read:
|
|
|
||
| function shade(percentage: number, color: string) { | ||
| if (!percentage || !color) throw new Error('Passed insufficient arguments to shade, please pass a percentage and a color to be shaded.') | ||
| if (typeof percentage !== 'number' || percentage > 1) throw new Error('Passed an incorrect argument to shade, please pass a percentage less than or equal to 1.') |
There was a problem hiding this comment.
Should we check for a range between -1 to 1? -1 would basically tint the color if I'm not mistaken, but still a valid input.
There was a problem hiding this comment.
I need to update this to capture the negative use case, but I'm not sure I like the idea of allowing either helper to do the job of the other by accident (putting in a negative number). It feels like it would be better to limit it based on each helpers use case. Thoughts?
| import mix from './mix' | ||
|
|
||
| /** | ||
| * Shades a color by mixing it with black. Leverages the mix color module. |
There was a problem hiding this comment.
@bhough can you remove Leverages the mix color module? I think it doesn't add much value for a user, but I really liked your explanation in the comment. What if we do something like this:
Shades a color by mixing it with black. Compared to `darken` it can produce hue shifts, wheres `darken` manipulates the luminance channel and therefor doesn't produce hue shifts.
There was a problem hiding this comment.
I like that, I'll update it.
| function shade(percentage: number, color: string) { | ||
| if (!percentage || !color) throw new Error('Passed insufficient arguments to shade, please pass a percentage and a color to be shaded.') | ||
| if (typeof percentage !== 'number' || percentage > 1) throw new Error('Passed an incorrect argument to shade, please pass a percentage less than or equal to 1.') | ||
| if (typeof color !== 'string') throw new Error('Passed an incorrect argument to shade, please pass a string representation of a color.') |
There was a problem hiding this comment.
mix is checking if it's a color valid to parse. We can drop this check 😄
|
|
||
| function tint(percentage: number, color: string) { | ||
| if (!percentage || !color) throw new Error('Passed insufficient arguments to tint, please pass a percentage and a color to be tinted.') | ||
| if (typeof percentage !== 'number' || percentage > 1) throw new Error('Passed an incorrect argument to tint, please pass a percentage less than or equal to 1.') |
|
@bhough let's merge this PR. I will be on a plane for 5h and clean it up there. Just want to avoid merge conflicts later on 😄 |
Adds tint and shade helpers. Also fixes some issues with documentation and alphabetizes color imports.
Addresses items from #1.