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

@@ -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});
 }

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});
 }

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});
 }