|
1 |
| -import { hexToHSL, hslToHex } from '@barelyhuman/tocolor' |
| 1 | +import { hexToHSL, hslToHex } from "@barelyhuman/tocolor"; |
2 | 2 |
|
3 | 3 | function lighter(percentage: number, color: string) {
|
4 |
| - if (isNaN(percentage)) return color |
5 |
| - const { h, s, l } = hexToHSL(color) |
6 |
| - let _afterLighten = l + percentage |
7 |
| - if (_afterLighten > 100) _afterLighten = 100 |
8 |
| - return hslToHex(h, s, _afterLighten) |
| 4 | + if (isNaN(percentage)) return color; |
| 5 | + const { h, s, l } = hexToHSL(color); |
| 6 | + let _afterLighten = l + percentage; |
| 7 | + if (_afterLighten > 100) _afterLighten = 100; |
| 8 | + return hslToHex(h, s, _afterLighten); |
9 | 9 | }
|
10 | 10 |
|
11 | 11 | interface TintColorMap {
|
12 |
| - base: string |
13 |
| - tones: number[] |
| 12 | + base: string; |
| 13 | + tones: number[]; |
14 | 14 | }
|
15 | 15 |
|
16 | 16 | export function makeTints(toTint: TintColorMap[]) {
|
17 |
| - const result = [] |
| 17 | + const result = []; |
18 | 18 | for (let i = 0; i < toTint.length; i++) {
|
19 |
| - const toTintItem = toTint[i] |
| 19 | + const toTintItem = toTint[i]; |
20 | 20 | const _item: { base: string; [key: number]: string } = {
|
21 | 21 | base: lighter(0, toTintItem.base),
|
22 |
| - } |
| 22 | + }; |
23 | 23 | toTintItem.tones.forEach((tone) => {
|
24 |
| - const per = 100 - tone |
25 |
| - _item[tone] = lighter(per >= 0 ? per : 0, toTintItem.base) |
26 |
| - }) |
| 24 | + const per = 100 - tone; |
| 25 | + _item[tone] = lighter(per >= 0 ? per : 0, toTintItem.base); |
| 26 | + }); |
27 | 27 |
|
28 |
| - result.push(_item) |
| 28 | + result.push(_item); |
29 | 29 | }
|
30 |
| - return result |
| 30 | + return result; |
31 | 31 | }
|
0 commit comments