From 6b3d88827923e1c7803a1eac90da5456c8700f94 Mon Sep 17 00:00:00 2001 From: angularpackage Date: Sat, 6 Aug 2022 03:52:36 +0000 Subject: [PATCH] ability(functions/color): use the `get-color-name()` function in the `get-var-hue()` `get-var-saturation()` and `get-var-lightness()` functions to have the ability to pass the color code. --- src/functions/color/hsla/_get-var-hue.function.scss | 3 ++- src/functions/color/hsla/_get-var-lightness.function.scss | 3 ++- src/functions/color/hsla/_get-var-saturation.function.scss | 3 ++- 3 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/functions/color/hsla/_get-var-hue.function.scss b/src/functions/color/hsla/_get-var-hue.function.scss index 80d4410c1..4cb67d681 100644 --- a/src/functions/color/hsla/_get-var-hue.function.scss +++ b/src/functions/color/hsla/_get-var-hue.function.scss @@ -1,6 +1,7 @@ @use '../../../variables' as *; +@use '../get-color-name.function' as *; // The function returns the CSS variable hue color of the given `$name` and `$prefix`. @function get-var-hue($name, $prefix: $var-prefix) { - @return var(--#{$prefix}-#{$name}-#{$var-hue}); + @return var(--#{$prefix}-#{get-color-name($name)}-#{$var-hue}); } diff --git a/src/functions/color/hsla/_get-var-lightness.function.scss b/src/functions/color/hsla/_get-var-lightness.function.scss index a2bc46a10..b9a847314 100644 --- a/src/functions/color/hsla/_get-var-lightness.function.scss +++ b/src/functions/color/hsla/_get-var-lightness.function.scss @@ -1,6 +1,7 @@ @use '../../../variables' as *; +@use '../get-color-name.function' as *; // The function returns the CSS variable lightness color of the given `$name` and `$prefix`. @function get-var-lightness($name, $prefix: $var-prefix) { - @return var(--#{$prefix}-#{$name}-#{$var-lightness}); + @return var(--#{$prefix}-#{get-color-name($name)}-#{$var-lightness}); } diff --git a/src/functions/color/hsla/_get-var-saturation.function.scss b/src/functions/color/hsla/_get-var-saturation.function.scss index eb930e072..d0bae008c 100644 --- a/src/functions/color/hsla/_get-var-saturation.function.scss +++ b/src/functions/color/hsla/_get-var-saturation.function.scss @@ -1,6 +1,7 @@ @use '../../../variables' as *; +@use '../get-color-name.function' as *; // The function returns the CSS variable saturation color of the given `$name` and `$prefix`. @function get-var-saturation($name, $prefix: $var-prefix) { - @return var(--#{$prefix}-#{$name}-#{$var-saturation}); + @return var(--#{$prefix}-#{get-color-name($name)}-#{$var-saturation}); }