diff --git a/src/files-ui/core/color/colors.ts b/src/files-ui/core/color/colors.ts index 738dfbaa51bfa21e3d1dca845602bcd497dfa596..c0714f1b0d7e56ab4125a0d08e1c27321cd3b3aa 100644 --- a/src/files-ui/core/color/colors.ts +++ b/src/files-ui/core/color/colors.ts @@ -5,7 +5,7 @@ import { NAMED_COLORS } from "./namedColors"; * @param colorInput * @returns the darked color in */ - export const darkerColor = (colorInput: string, percentage = 25): string => { +export const darkerColor = (colorInput: string, percentage = 25): string => { let darkedColor = ""; const reduce = (100 - percentage) / 100; let component1: number = 0; @@ -206,11 +206,26 @@ export const hexTodec = (letter: string): number => { * @param color param color given by user * @returns returns the same color */ - export const asureColor = (color?: string): string => { +export const asureColor = (color?: string): string => { if (color !== undefined && color !== "") { return color; } else { - return "#646c7f"; + return DEFAULT_FONT_COLOR; } } +/** + * Asure a base color. When not given or when given an incorrect color format + * default color is this kind of grey #5d6475 + * + * @param color param color given by user + * @returns returns the same color + */ +export const completeAsureColor = (color?: string, perc = 1): string => { + + return hexColorToRGB(asureColor(colourNameToHex(color)), perc); + +} + + +export const DEFAULT_FONT_COLOR = "#646c7f"; \ No newline at end of file diff --git a/src/files-ui/core/color/index.ts b/src/files-ui/core/color/index.ts index e7974729faf961a211c7b8939a3da9f60c19d043..6b33c40aefc4bddf0d41bb7d19e768b27b46be09 100644 --- a/src/files-ui/core/color/index.ts +++ b/src/files-ui/core/color/index.ts @@ -6,5 +6,6 @@ export { darkerColor, hexColorToRGB, hexTodec, - isHexColor + isHexColor, + completeAsureColor } from "./colors"; \ No newline at end of file diff --git a/src/files-ui/core/index.ts b/src/files-ui/core/index.ts index 0c918711726ce820aca4736f3bf15383de4348f8..32369769054827152abe0cb596200a6893c46d51 100644 --- a/src/files-ui/core/index.ts +++ b/src/files-ui/core/index.ts @@ -163,7 +163,8 @@ export { hexColorToRGB, hexTodec, isHexColor, - NAMED_COLORS + NAMED_COLORS, + completeAsureColor } from "./color"; export { diff --git a/src/files-ui/core/ripple/ripple.ts b/src/files-ui/core/ripple/ripple.ts index a28249199325bb1aa8d4cb70d6fbe50fac4b48c2..aa52e4177c1f209af8d7c165c3adb825466cbb47 100644 --- a/src/files-ui/core/ripple/ripple.ts +++ b/src/files-ui/core/ripple/ripple.ts @@ -1,8 +1,7 @@ -import { asureColor, colourNameToHex, hexColorToRGB } from "../color"; +import { completeAsureColor, hexColorToRGB } from "../color"; const asureRippleColor = (color: string): string => { - return hexColorToRGB( - asureColor(colourNameToHex(color)), + return completeAsureColor(color, 0.4 ); } @@ -69,10 +68,7 @@ export function createRippleButton< circle.classList.add("ripple"); if (variant !== "contained") { - circle.style.backgroundColor = hexColorToRGB( - asureColor(colourNameToHex(color)), - 0.4 - ); + circle.style.backgroundColor = asureRippleColor(color); } else { circle.style.backgroundColor = hexColorToRGB("#ffffff", 0.4);