muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-24 20:36:40 +07:00
Code Packages Activity Actions

fixed lab color gradients calculation

Browse source
This commit is contained in:
Fedor Katurov 2021-10-08 11:16:20 +07:00
parent a09c129d04
commit 17e3f211ef
2 changed files with 5 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/utils/color.ts
View file

@ -3,7 +3,7 @@ import { DEFAULT_DOMINANT_COLOR } from '~/constants/node';
export const normalizeBrightColor = (color?: string, saturationExp = 3, lightnessExp = 3) => { export const normalizeBrightColor = (color?: string, saturationExp = 3, lightnessExp = 3) => {
if (!color) { if (!color) {
return undefined; return '';
} }
const hsla = parseToHsla(color || DEFAULT_DOMINANT_COLOR); const hsla = parseToHsla(color || DEFAULT_DOMINANT_COLOR);

9
src/utils/hooks/useColorGradientFromString.ts
View file

@ -1,18 +1,17 @@
import { useMemo } from 'react'; import { useMemo } from 'react';
import { adjustHue } from 'color2k'; import { adjustHue } from 'color2k';
import { useColorFromString } from '~/utils/hooks/useColorFromString';
import { normalizeBrightColor } from '~/utils/color'; import { normalizeBrightColor } from '~/utils/color';
import { stringToColour } from '~/utils/dom';
export const useColorGradientFromString = (val?: string, saturation = 3, lightness = 3) => { export const useColorGradientFromString = (val?: string, saturation = 3, lightness = 3) =>
return useMemo(() => { useMemo(() => {
if (!val) { if (!val) {
return ''; return '';
} }
const color = useColorFromString(val, saturation, lightness); const color = normalizeBrightColor(stringToColour(val), saturation, lightness);
const second = normalizeBrightColor(adjustHue(color, 45), saturation, lightness); const second = normalizeBrightColor(adjustHue(color, 45), saturation, lightness);
const third = normalizeBrightColor(adjustHue(color, 90), saturation, lightness); const third = normalizeBrightColor(adjustHue(color, 90), saturation, lightness);
return `linear-gradient(155deg, ${color}, ${second}, ${third})`; return `linear-gradient(155deg, ${color}, ${second}, ${third})`;
}, [val]); }, [val]);
};