From e2936832349d72b1610e70ab2f1afa0432a182e8 Mon Sep 17 00:00:00 2001 From: Tomi Turtiainen <10324676+tomi@users.noreply.github.com> Date: Fri, 14 Jun 2024 14:30:29 +0300 Subject: [PATCH] refactor: Migrate ColorCircles to composition api (no-changelog) (#9747) --- .../src/styleguide/ColorCircles.utils.ts | 44 ++++++ .../src/styleguide/ColorCircles.vue | 148 ++++++------------ 2 files changed, 92 insertions(+), 100 deletions(-) create mode 100644 packages/design-system/src/styleguide/ColorCircles.utils.ts diff --git a/packages/design-system/src/styleguide/ColorCircles.utils.ts b/packages/design-system/src/styleguide/ColorCircles.utils.ts new file mode 100644 index 0000000000..f28ef6e05e --- /dev/null +++ b/packages/design-system/src/styleguide/ColorCircles.utils.ts @@ -0,0 +1,44 @@ +/** + * Convert an HSL color to a Hex color + */ +export function hslToHex(h: number, s: number, l: number): string { + l /= 100; + const a = (s * Math.min(l, 1 - l)) / 100; + const f = (n: number) => { + const k = (n + h / 30) % 12; + const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1); + return Math.round(255 * color) + .toString(16) + .padStart(2, '0'); + }; + return `#${f(0)}${f(8)}${f(4)}`; +} + +/** + * Resolve calc() expressions in HSL strings + */ +export function resolveHSLCalc(hslString: string): string { + const calcRegex = /calc\(([^)]+)\)/; + const matchCalc = hslString.match(calcRegex); + if (!matchCalc) { + return hslString; + } + const expression = matchCalc[1].replace(/%/g, ''); + const evaluation: number = eval(expression); + const finalPercentage = `${evaluation}%`; + return hslString.replace(calcRegex, finalPercentage); +} + +/** + * Get the Hex color from an HSL color string + */ +export function getHex(hsl: string): string { + hsl = resolveHSLCalc(hsl); + const colors = hsl + .replace('hsl(', '') + .replace(')', '') + .replace(/%/g, '') + .split(',') + .map(parseFloat); + return hslToHex(colors[0], colors[1], colors[2]); +} diff --git a/packages/design-system/src/styleguide/ColorCircles.vue b/packages/design-system/src/styleguide/ColorCircles.vue index 0643883ac4..81955c319f 100644 --- a/packages/design-system/src/styleguide/ColorCircles.vue +++ b/packages/design-system/src/styleguide/ColorCircles.vue @@ -1,3 +1,51 @@ + + - -