Skip to content

Commit

Permalink
fix(generate-mixed-colors): lint errors, write code in sass module style
Browse files Browse the repository at this point in the history
  • Loading branch information
@felix-berlin
felix-berlin committed Aug 26, 2023
1 parent 0843366 commit 9d7f298
Show file tree
Hide file tree
Showing 2 changed files with 58 additions and 48 deletions.
58 changes: 28 additions & 30 deletions functions/_colors.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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;
}
48 changes: 30 additions & 18 deletions tests/colors-generate-mixed-colors.spec.scss
View file
Original file line number Diff line number Diff line change
@@ -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)
);
}
}

0 comments on commit 9d7f298

Please sign in to comment.