roleypoly/v3
1
0
Fork 0
mirror of https://github.com/roleypoly/roleypoly.git synced 2025-04-25 03:49:11 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(Role): better role name color mapping

Browse source
This commit is contained in:
41666 2020-12-19 15:04:45 -05:00
parent b956f3fa66
commit d4e8e8330a
1 changed files with 22 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
src/design-system/atoms/role/Role.tsx
View file

@ -15,6 +15,27 @@ type Props = {
type?: 'delete'; type?: 'delete';
}; };
const getColorsFromBase = (baseColor: chroma.Color, contrastCheckThrow: number = 5) => {
// Which has more contrast? Stepping up or stepping down?
const contrastColorUp = baseColor.brighten(contrastCheckThrow);
const contrastColorDown = baseColor.darken(contrastCheckThrow);
if (
chroma.contrast(baseColor, contrastColorUp) >
chroma.contrast(baseColor, contrastColorDown)
) {
return {
contrastColor: baseColor.brighten(3),
accentColor: baseColor.brighten(2),
};
} else {
return {
contrastColor: baseColor.darken(3),
accentColor: baseColor.darken(2),
};
}
};
export const Role = (props: Props) => { export const Role = (props: Props) => {
const colorVars = { const colorVars = {
'--role-color': 'white', '--role-color': 'white',
@ -24,11 +45,7 @@ export const Role = (props: Props) => {
if (props.role.color !== 0) { if (props.role.color !== 0) {
const baseColor = numberToChroma(props.role.color); const baseColor = numberToChroma(props.role.color);
const contrastColorUp = baseColor.brighten(5); const { accentColor, contrastColor } = getColorsFromBase(baseColor, 5);
const contrastColorDown = baseColor.darken(5);
const ratio = chroma.contrast(contrastColorDown, baseColor);
const contrastColor = ratio > 2 ? contrastColorDown : contrastColorUp;
const accentColor = ratio > 2 ? baseColor.darken(2) : baseColor.brighten(2);
colorVars['--role-color'] = baseColor.css(); colorVars['--role-color'] = baseColor.css();
colorVars['--role-accent'] = accentColor.css(); colorVars['--role-accent'] = accentColor.css();
colorVars['--role-contrast'] = contrastColor.css(); colorVars['--role-contrast'] = contrastColor.css();