diff --git a/functions/_colors.scss b/functions/_colors.scss index ce6ce86..8842e94 100644 --- a/functions/_colors.scss +++ b/functions/_colors.scss @@ -2,11 +2,10 @@ @use "sass:color"; @use "sass:math"; @use "sass:string"; +@use "./type-checking" as check; +@use "throw"; -@use './type-checking' as check; - -@use '../node_modules/sass-true/sass/throw' as throw; -$_is-test: false !default; +$is-test: false !default; /// Convert HEX colors to R, G, B values /// @param {Color} $color @@ -111,50 +110,49 @@ $_is-test: false !default; $steps: 20, $color2-peak: 11, ) { - @if(check.is-color($color1) == false) { - @return throw.error("❌ ===> The color1 parameter must be a color.", $catch: $_is-test); + @if check.is-color($color1) == false { + @return throw.error("❌ ===> The color1 parameter must be a color.", $catch: $is-test); } - @if(check.is-color($color2) == false) { - @return throw.error("❌ ===> The color2 parameter must be a color.", $catch: $_is-test); + @if check.is-color($color2) == false { + @return throw.error("❌ ===> The color2 parameter must be a color.", $catch: $is-test); } - @if(check.is-color($color3) == false) { - @return throw.error("❌ ===> The color3 parameter must be a color.", $catch: $_is-test); + @if check.is-color($color3) == false { + @return throw.error("❌ ===> The color3 parameter must be a color.", $catch: $is-test); } - @if(check.is-integer($steps) == false) { - @return throw.error("❌ ===> The steps parameter must be an integer.", $catch: $_is-test); + @if check.is-integer($steps) == false { + @return throw.error("❌ ===> The steps parameter must be an integer.", $catch: $is-test); } - @if(check.is-integer($color2-peak) == false) { - @return throw.error("❌ ===> The color2-peak parameter must be an integer.", $catch: $_is-test); + @if check.is-integer($color2-peak) == false { + @return throw.error("❌ ===> The color2-peak parameter must be an integer.", $catch: $is-test); } - @if ($color2-peak > $steps) { - @return throw.error("❌ ===> The peak point for color2 must be less than or equal to the number of steps.", $catch: $_is-test); + @if $color2-peak > $steps { + @return throw.error("❌ ===> The peak point for color2 must be less than or equal to the number of steps.", $catch: $is-test); } - @if ($color2-peak < 1) { - @return throw.error("❌ ===> The peak point for color2 must be greater than or equal to 1.", $catch: $_is-test); + @if $color2-peak < 1 { + @return throw.error("❌ ===> The peak point for color2 must be greater than or equal to 1.", $catch: $is-test); } - $colorMap: (1: $color1); + $color-map: (1: $color1); - @if($color2-peak > 2) { + @if $color2-peak > 2 { @for $i from 2 through $color2-peak - 1 { $percentage: (math.div(1, $color2-peak) * ($color2-peak - $i)); - $color: mix($color1, $color2, $percentage * 100%); - $colorMap: map.merge($colorMap, ($i: $color)); + $color: color.mix($color1, $color2, $percentage * 100%); + $color-map: map.merge($color-map, ($i: $color)); } } - $colorMap: map.merge($colorMap, ($color2-peak: $color2)); + $color-map: map.merge($color-map, ($color2-peak: $color2)); - @if($color2-peak < $steps) { - @for $i from $color2-peak+1 through $steps - 1 { + @if $color2-peak < $steps { + @for $i from $color2-peak + 1 through $steps - 1 { $percentage: (math.div(1, $steps - $color2-peak) * ($steps - $i)); - $color: mix($color2, $color3, $percentage * 100%); - - $colorMap: map.merge($colorMap, ($i: $color)); + $color: color.mix($color2, $color3, $percentage * 100%); + $color-map: map.merge($color-map, ($i: $color)); } - $colorMap: map.merge($colorMap, ($steps: $color3)) + $color-map: map.merge($color-map, ($steps: $color3)) } - @return $colorMap; + @return $color-map; } \ No newline at end of file diff --git a/tests/colors-generate-mixed-colors.spec.scss b/tests/colors-generate-mixed-colors.spec.scss index 90ff73d..3319253 100644 --- a/tests/colors-generate-mixed-colors.spec.scss +++ b/tests/colors-generate-mixed-colors.spec.scss @@ -1,51 +1,63 @@ -//@use 'true'; -$_is-test: true; -@use '../node_modules/sass-true/sass/true' as true; -@import '../functions/_colors.scss'; - +@use 'true'; +@use '../functions' as fn with ( + $is-test: true, +); @include true.describe('generate-mixed-colors()') { @include true.it('should throw an error if the step and peak parameters are wrong') { @include true.assert-equal( - generate-mixed-colors(1, 1, 1), 'ERROR: ❌ ===> The color1 parameter must be a color.' + fn.generate-mixed-colors(1, 1, 1), + 'ERROR: ❌ ===> The color1 parameter must be a color.' ); @include true.assert-equal( - generate-mixed-colors(green, 1, 1), 'ERROR: ❌ ===> The color2 parameter must be a color.' + fn.generate-mixed-colors(green, 1, 1), + 'ERROR: ❌ ===> The color2 parameter must be a color.' ); @include true.assert-equal( - generate-mixed-colors(green, yellow, 1), 'ERROR: ❌ ===> The color3 parameter must be a color.' + fn.generate-mixed-colors(green, yellow, 1), + 'ERROR: ❌ ===> The color3 parameter must be a color.' ); @include true.assert-equal( - generate-mixed-colors(green, yellow, red, "hallo"), 'ERROR: ❌ ===> The steps parameter must be an integer.' + fn.generate-mixed-colors(green, yellow, red, "hallo"), + 'ERROR: ❌ ===> The steps parameter must be an integer.' ); @include true.assert-equal( - generate-mixed-colors(green, yellow, red, 10, "welt"), 'ERROR: ❌ ===> The color2-peak parameter must be an integer.' + fn.generate-mixed-colors(green, yellow, red, 10, "welt"), + 'ERROR: ❌ ===> The color2-peak parameter must be an integer.' ); @include true.assert-equal( - generate-mixed-colors(green, yellow, red, 0, 2), 'ERROR: ❌ ===> The peak point for color2 must be less than or equal to the number of steps.' + fn.generate-mixed-colors(green, yellow, red, 0, 2), + 'ERROR: ❌ ===> The peak point for color2 must be less than or equal to the number of steps.' ); @include true.assert-equal( - generate-mixed-colors(green, yellow, red, 0, 0), 'ERROR: ❌ ===> The peak point for color2 must be greater than or equal to 1.' + fn.generate-mixed-colors(green, yellow, red, 0, 0), + 'ERROR: ❌ ===> The peak point for color2 must be greater than or equal to 1.' ); @include true.assert-equal( - generate-mixed-colors(green, yellow, red, -1, -1), 'ERROR: ❌ ===> The peak point for color2 must be greater than or equal to 1.' + fn.generate-mixed-colors(green, yellow, red, -1, -1), + 'ERROR: ❌ ===> The peak point for color2 must be greater than or equal to 1.' ); } @include true.it('should return expected color maps') { @include true.assert-equal( - generate-mixed-colors(green, yellow, red, 1, 1), (1: yellow) + fn.generate-mixed-colors(green, yellow, red, 1, 1), + (1: yellow) ); @include true.assert-equal( - generate-mixed-colors(green, yellow, red, 3, 2), (1: green, 2: yellow, 3: red) + fn.generate-mixed-colors(green, yellow, red, 3, 2), + (1: green, 2: yellow, 3: red) ); @include true.assert-equal( - generate-mixed-colors(green, yellow, red, 2, 1), (1: yellow, 2: red) + fn.generate-mixed-colors(green, yellow, red, 2, 1), + (1: yellow, 2: red) ); @include true.assert-equal( - generate-mixed-colors(green, yellow, red), (1: green, 2: #2e9700, 3: #46a300, 4: #5dae00, 5: #74ba00, 6: #8bc500, 7: #a2d100, 8: #b9dc00, 9: #d1e800, 10: #e8f300, 11: yellow, 12: #ffe300, 13: #ffc600, 14: #ffaa00, 15: #ff8e00, 16: #ff7100, 17: #ff5500, 18: #ff3900, 19: #ff1c00, 20: red) + fn.generate-mixed-colors(green, yellow, red), + (1: green, 2: #2e9700, 3: #46a300, 4: #5dae00, 5: #74ba00, 6: #8bc500, 7: #a2d100, 8: #b9dc00, 9: #d1e800, 10: #e8f300, 11: yellow, 12: #ffe300, 13: #ffc600, 14: #ffaa00, 15: #ff8e00, 16: #ff7100, 17: #ff5500, 18: #ff3900, 19: #ff1c00, 20: red) ); @include true.assert-equal( - generate-mixed-colors(#7ed321, #ffc700, #cc0000), (1: #7ed321, 2: #95d11b, 3: #a1d018, 4: #adcf15, 5: #b9ce12, 6: #c4cc0f, 7: #d0cb0c, 8: #dcca09, 9: #e8c906, 10: #f3c803, 11: #ffc700, 12: #f9b100, 13: #f49b00, 14: #ee8500, 15: #e86f00, 16: #e35800, 17: #dd4200, 18: #d72c00, 19: #d21600, 20: #cc0000) + fn.generate-mixed-colors(#7ed321, #ffc700, #cc0000), + (1: #7ed321, 2: #95d11b, 3: #a1d018, 4: #adcf15, 5: #b9ce12, 6: #c4cc0f, 7: #d0cb0c, 8: #dcca09, 9: #e8c906, 10: #f3c803, 11: #ffc700, 12: #f9b100, 13: #f49b00, 14: #ee8500, 15: #e86f00, 16: #e35800, 17: #dd4200, 18: #d72c00, 19: #d21600, 20: #cc0000) ); } } \ No newline at end of file