From 4b1419b791d1479f1fd0cb66a87749a8624fe5fc Mon Sep 17 00:00:00 2001 From: Natalie Weizenbaum Date: Tue, 7 May 2024 14:07:03 -0700 Subject: [PATCH 1/4] Convert scale-color() tests to use the color.scale() function --- .../{scale_color => scale}/error/args.hrx | 21 ++-- .../{scale_color => scale}/error/bounds.hrx | 113 ++++++++++-------- .../error/mixed_formats.hrx | 49 ++++---- .../{scale_color => scale}/error/type.hrx | 64 +++++----- .../{scale_color => scale}/error/units.hrx | 113 ++++++++++-------- spec/core_functions/color/scale/global.hrx | 17 +++ .../color/{scale_color => scale}/hsl.hrx | 42 ++++--- .../color/{scale_color => scale}/hwb.hrx | 42 ++++--- .../{scale_color => scale}/no_rgb_hsl.hrx | 21 ++-- .../color/{scale_color => scale}/rgb.hrx | 57 ++++++--- 10 files changed, 329 insertions(+), 210 deletions(-) rename spec/core_functions/color/{scale_color => scale}/error/args.hrx (68%) rename spec/core_functions/color/{scale_color => scale}/error/bounds.hrx (64%) rename spec/core_functions/color/{scale_color => scale}/error/mixed_formats.hrx (63%) rename spec/core_functions/color/{scale_color => scale}/error/type.hrx (61%) rename spec/core_functions/color/{scale_color => scale}/error/units.hrx (63%) create mode 100644 spec/core_functions/color/scale/global.hrx rename spec/core_functions/color/{scale_color => scale}/hsl.hrx (73%) rename spec/core_functions/color/{scale_color => scale}/hwb.hrx (71%) rename spec/core_functions/color/{scale_color => scale}/no_rgb_hsl.hrx (71%) rename spec/core_functions/color/{scale_color => scale}/rgb.hrx (72%) diff --git a/spec/core_functions/color/scale_color/error/args.hrx b/spec/core_functions/color/scale/error/args.hrx similarity index 68% rename from spec/core_functions/color/scale_color/error/args.hrx rename to spec/core_functions/color/scale/error/args.hrx index 80a237ee0..394dd6805 100644 --- a/spec/core_functions/color/scale_color/error/args.hrx +++ b/spec/core_functions/color/scale/error/args.hrx @@ -1,40 +1,43 @@ <===> too_few/input.scss -a {b: scale-color()} +@use 'sass:color'; +a {b: color.scale()} <===> too_few/error Error: Missing argument $color. ,--> input.scss -1 | a {b: scale-color()} +2 | a {b: color.scale()} | ^^^^^^^^^^^^^ invocation ' ,--> sass:color 1 | @function scale($color, $kwargs...) { | ========================= declaration ' - input.scss 1:7 root stylesheet + input.scss 2:7 root stylesheet <===> ================================================================================ <===> too_many/input.scss -a {b: scale-color(red, 1)} +@use 'sass:color'; +a {b: color.scale(red, 1)} <===> too_many/error Error: Only one positional argument is allowed. All other arguments must be passed by name. , -1 | a {b: scale-color(red, 1)} +2 | a {b: color.scale(red, 1)} | ^^^^^^^^^^^^^^^^^^^ ' - input.scss 1:7 root stylesheet + input.scss 2:7 root stylesheet <===> ================================================================================ <===> unknown/input.scss -a {b: scale-color(red, $hue: 10%)} +@use 'sass:color'; +a {b: color.scale(red, $hue: 10%)} <===> unknown/error Error: $hue: Channel isn't scalable. , -1 | a {b: scale-color(red, $hue: 10%)} +2 | a {b: color.scale(red, $hue: 10%)} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^ ' - input.scss 1:7 root stylesheet + input.scss 2:7 root stylesheet diff --git a/spec/core_functions/color/scale_color/error/bounds.hrx b/spec/core_functions/color/scale/error/bounds.hrx similarity index 64% rename from spec/core_functions/color/scale_color/error/bounds.hrx rename to spec/core_functions/color/scale/error/bounds.hrx index f43a45eee..a07b42e14 100644 --- a/spec/core_functions/color/scale_color/error/bounds.hrx +++ b/spec/core_functions/color/scale/error/bounds.hrx @@ -1,206 +1,221 @@ <===> red/too_low/input.scss -a {b: scale-color(red, $red: -100.001%)} +@use 'sass:color'; +a {b: color.scale(red, $red: -100.001%)} <===> red/too_low/error Error: $red: Expected -100.001% to be within -100% and 100%. , -1 | a {b: scale-color(red, $red: -100.001%)} +2 | a {b: color.scale(red, $red: -100.001%)} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ' - input.scss 1:7 root stylesheet + input.scss 2:7 root stylesheet <===> ================================================================================ <===> red/too_high/input.scss -a {b: scale-color(red, $red: 100.001%)} +@use 'sass:color'; +a {b: color.scale(red, $red: 100.001%)} <===> red/too_high/error Error: $red: Expected 100.001% to be within -100% and 100%. , -1 | a {b: scale-color(red, $red: 100.001%)} +2 | a {b: color.scale(red, $red: 100.001%)} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ' - input.scss 1:7 root stylesheet + input.scss 2:7 root stylesheet <===> ================================================================================ <===> green/too_low/input.scss -a {b: scale-color(green, $green: -100.001%)} +@use 'sass:color'; +a {b: color.scale(green, $green: -100.001%)} <===> green/too_low/error Error: $green: Expected -100.001% to be within -100% and 100%. , -1 | a {b: scale-color(green, $green: -100.001%)} +2 | a {b: color.scale(green, $green: -100.001%)} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ' - input.scss 1:7 root stylesheet + input.scss 2:7 root stylesheet <===> ================================================================================ <===> green/too_high/input.scss -a {b: scale-color(green, $green: 100.001%)} +@use 'sass:color'; +a {b: color.scale(green, $green: 100.001%)} <===> green/too_high/error Error: $green: Expected 100.001% to be within -100% and 100%. , -1 | a {b: scale-color(green, $green: 100.001%)} +2 | a {b: color.scale(green, $green: 100.001%)} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ' - input.scss 1:7 root stylesheet + input.scss 2:7 root stylesheet <===> ================================================================================ <===> blue/too_low/input.scss -a {b: scale-color(blue, $blue: -100.001%)} +@use 'sass:color'; +a {b: color.scale(blue, $blue: -100.001%)} <===> blue/too_low/error Error: $blue: Expected -100.001% to be within -100% and 100%. , -1 | a {b: scale-color(blue, $blue: -100.001%)} +2 | a {b: color.scale(blue, $blue: -100.001%)} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ' - input.scss 1:7 root stylesheet + input.scss 2:7 root stylesheet <===> ================================================================================ <===> blue/too_high/input.scss -a {b: scale-color(blue, $blue: 100.001%)} +@use 'sass:color'; +a {b: color.scale(blue, $blue: 100.001%)} <===> blue/too_high/error Error: $blue: Expected 100.001% to be within -100% and 100%. , -1 | a {b: scale-color(blue, $blue: 100.001%)} +2 | a {b: color.scale(blue, $blue: 100.001%)} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ' - input.scss 1:7 root stylesheet + input.scss 2:7 root stylesheet <===> ================================================================================ <===> saturation/too_low/input.scss -a {b: scale-color(red, $saturation: -100.001%)} +@use 'sass:color'; +a {b: color.scale(red, $saturation: -100.001%)} <===> saturation/too_low/error Error: $saturation: Expected -100.001% to be within -100% and 100%. , -1 | a {b: scale-color(red, $saturation: -100.001%)} +2 | a {b: color.scale(red, $saturation: -100.001%)} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ' - input.scss 1:7 root stylesheet + input.scss 2:7 root stylesheet <===> ================================================================================ <===> saturation/too_high/input.scss -a {b: scale-color(red, $saturation: 100.001%)} +@use 'sass:color'; +a {b: color.scale(red, $saturation: 100.001%)} <===> saturation/too_high/error Error: $saturation: Expected 100.001% to be within -100% and 100%. , -1 | a {b: scale-color(red, $saturation: 100.001%)} +2 | a {b: color.scale(red, $saturation: 100.001%)} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ' - input.scss 1:7 root stylesheet + input.scss 2:7 root stylesheet <===> ================================================================================ <===> lightness/too_low/input.scss -a {b: scale-color(red, $lightness: -100.001%)} +@use 'sass:color'; +a {b: color.scale(red, $lightness: -100.001%)} <===> lightness/too_low/error Error: $lightness: Expected -100.001% to be within -100% and 100%. , -1 | a {b: scale-color(red, $lightness: -100.001%)} +2 | a {b: color.scale(red, $lightness: -100.001%)} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ' - input.scss 1:7 root stylesheet + input.scss 2:7 root stylesheet <===> ================================================================================ <===> lightness/too_high/input.scss -a {b: scale-color(red, $lightness: 100.001%)} +@use 'sass:color'; +a {b: color.scale(red, $lightness: 100.001%)} <===> lightness/too_high/error Error: $lightness: Expected 100.001% to be within -100% and 100%. , -1 | a {b: scale-color(red, $lightness: 100.001%)} +2 | a {b: color.scale(red, $lightness: 100.001%)} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ' - input.scss 1:7 root stylesheet + input.scss 2:7 root stylesheet <===> ================================================================================ <===> alpha/too_low/input.scss -a {b: scale-color(red, $alpha: -100.001%)} +@use 'sass:color'; +a {b: color.scale(red, $alpha: -100.001%)} <===> alpha/too_low/error Error: $alpha: Expected -100.001% to be within -100% and 100%. , -1 | a {b: scale-color(red, $alpha: -100.001%)} +2 | a {b: color.scale(red, $alpha: -100.001%)} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ' - input.scss 1:7 root stylesheet + input.scss 2:7 root stylesheet <===> ================================================================================ <===> alpha/too_high/input.scss -a {b: scale-color(red, $alpha: 100.001%)} +@use 'sass:color'; +a {b: color.scale(red, $alpha: 100.001%)} <===> alpha/too_high/error Error: $alpha: Expected 100.001% to be within -100% and 100%. , -1 | a {b: scale-color(red, $alpha: 100.001%)} +2 | a {b: color.scale(red, $alpha: 100.001%)} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ' - input.scss 1:7 root stylesheet + input.scss 2:7 root stylesheet <===> ================================================================================ <===> blackness/too_low/input.scss -a {b: scale-color(red, $blackness: -100.001%)} +@use 'sass:color'; +a {b: color.scale(red, $blackness: -100.001%)} <===> blackness/too_low/error Error: $blackness: Expected -100.001% to be within -100% and 100%. , -1 | a {b: scale-color(red, $blackness: -100.001%)} +2 | a {b: color.scale(red, $blackness: -100.001%)} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ' - input.scss 1:7 root stylesheet + input.scss 2:7 root stylesheet <===> ================================================================================ <===> blackness/too_high/input.scss -a {b: scale-color(red, $blackness: 100.001%)} +@use 'sass:color'; +a {b: color.scale(red, $blackness: 100.001%)} <===> blackness/too_high/error Error: $blackness: Expected 100.001% to be within -100% and 100%. , -1 | a {b: scale-color(red, $blackness: 100.001%)} +2 | a {b: color.scale(red, $blackness: 100.001%)} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ' - input.scss 1:7 root stylesheet + input.scss 2:7 root stylesheet <===> ================================================================================ <===> whiteness/too_low/input.scss -a {b: scale-color(red, $whiteness: -100.001%)} +@use 'sass:color'; +a {b: color.scale(red, $whiteness: -100.001%)} <===> whiteness/too_low/error Error: $whiteness: Expected -100.001% to be within -100% and 100%. , -1 | a {b: scale-color(red, $whiteness: -100.001%)} +2 | a {b: color.scale(red, $whiteness: -100.001%)} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ' - input.scss 1:7 root stylesheet + input.scss 2:7 root stylesheet <===> ================================================================================ <===> whiteness/too_high/input.scss -a {b: scale-color(red, $whiteness: 100.001%)} +@use 'sass:color'; +a {b: color.scale(red, $whiteness: 100.001%)} <===> whiteness/too_high/error Error: $whiteness: Expected 100.001% to be within -100% and 100%. , -1 | a {b: scale-color(red, $whiteness: 100.001%)} +2 | a {b: color.scale(red, $whiteness: 100.001%)} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ' - input.scss 1:7 root stylesheet - + input.scss 2:7 root stylesheet diff --git a/spec/core_functions/color/scale_color/error/mixed_formats.hrx b/spec/core_functions/color/scale/error/mixed_formats.hrx similarity index 63% rename from spec/core_functions/color/scale_color/error/mixed_formats.hrx rename to spec/core_functions/color/scale/error/mixed_formats.hrx index c269a37d3..c5dbc0ab3 100644 --- a/spec/core_functions/color/scale_color/error/mixed_formats.hrx +++ b/spec/core_functions/color/scale/error/mixed_formats.hrx @@ -1,88 +1,95 @@ <===> red_and_saturation/input.scss -a {b: scale-color(red, $red: 1%, $saturation: 1%)} +@use 'sass:color'; +a {b: color.scale(red, $red: 1%, $saturation: 1%)} <===> red_and_saturation/error Error: $saturation: Color space rgb doesn't have a channel with this name. , -1 | a {b: scale-color(red, $red: 1%, $saturation: 1%)} +2 | a {b: color.scale(red, $red: 1%, $saturation: 1%)} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ' - input.scss 1:7 root stylesheet + input.scss 2:7 root stylesheet <===> ================================================================================ <===> green_and_saturation/input.scss -a {b: scale-color(red, $green: 1%, $saturation: 1%)} +@use 'sass:color'; +a {b: color.scale(red, $green: 1%, $saturation: 1%)} <===> green_and_saturation/error Error: $saturation: Color space rgb doesn't have a channel with this name. , -1 | a {b: scale-color(red, $green: 1%, $saturation: 1%)} +2 | a {b: color.scale(red, $green: 1%, $saturation: 1%)} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ' - input.scss 1:7 root stylesheet + input.scss 2:7 root stylesheet <===> ================================================================================ <===> blue_and_lightness/input.scss -a {b: scale-color(red, $blue: 1%, $lightness: 1%)} +@use 'sass:color'; +a {b: color.scale(red, $blue: 1%, $lightness: 1%)} <===> blue_and_lightness/error Error: $lightness: Color space rgb doesn't have a channel with this name. , -1 | a {b: scale-color(red, $blue: 1%, $lightness: 1%)} +2 | a {b: color.scale(red, $blue: 1%, $lightness: 1%)} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ' - input.scss 1:7 root stylesheet + input.scss 2:7 root stylesheet <===> ================================================================================ <===> red_and_blackness/input.scss -a {b: scale-color(red, $red: 1%, $blackness: 1%)} +@use 'sass:color'; +a {b: color.scale(red, $red: 1%, $blackness: 1%)} <===> red_and_blackness/error Error: $blackness: Color space rgb doesn't have a channel with this name. , -1 | a {b: scale-color(red, $red: 1%, $blackness: 1%)} +2 | a {b: color.scale(red, $red: 1%, $blackness: 1%)} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ' - input.scss 1:7 root stylesheet + input.scss 2:7 root stylesheet <===> ================================================================================ <===> green_and_whiteness/input.scss -a {b: scale-color(red, $green: 1%, $whiteness: 1%)} +@use 'sass:color'; +a {b: color.scale(red, $green: 1%, $whiteness: 1%)} <===> green_and_whiteness/error Error: $whiteness: Color space rgb doesn't have a channel with this name. , -1 | a {b: scale-color(red, $green: 1%, $whiteness: 1%)} +2 | a {b: color.scale(red, $green: 1%, $whiteness: 1%)} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ' - input.scss 1:7 root stylesheet + input.scss 2:7 root stylesheet <===> ================================================================================ <===> saturation_and_blackness/input.scss -a {b: scale-color(red, $saturation: 1%, $blackness: 1%)} +@use 'sass:color'; +a {b: color.scale(red, $saturation: 1%, $blackness: 1%)} <===> saturation_and_blackness/error Error: $blackness: Color space hsl doesn't have a channel with this name. , -1 | a {b: scale-color(red, $saturation: 1%, $blackness: 1%)} +2 | a {b: color.scale(red, $saturation: 1%, $blackness: 1%)} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ' - input.scss 1:7 root stylesheet + input.scss 2:7 root stylesheet <===> ================================================================================ <===> lightness_and_whiteness/input.scss -a {b: scale-color(red, $lightness: 1%, $whiteness: 1%)} +@use 'sass:color'; +a {b: color.scale(red, $lightness: 1%, $whiteness: 1%)} <===> lightness_and_whiteness/error Error: $whiteness: Color space hsl doesn't have a channel with this name. , -1 | a {b: scale-color(red, $lightness: 1%, $whiteness: 1%)} +2 | a {b: color.scale(red, $lightness: 1%, $whiteness: 1%)} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ' - input.scss 1:7 root stylesheet + input.scss 2:7 root stylesheet diff --git a/spec/core_functions/color/scale_color/error/type.hrx b/spec/core_functions/color/scale/error/type.hrx similarity index 61% rename from spec/core_functions/color/scale_color/error/type.hrx rename to spec/core_functions/color/scale/error/type.hrx index aa01247e8..ba309f217 100644 --- a/spec/core_functions/color/scale_color/error/type.hrx +++ b/spec/core_functions/color/scale/error/type.hrx @@ -1,115 +1,123 @@ <===> color/input.scss -a {b: scale-color(1)} +@use 'sass:color'; +a {b: color.scale(1)} <===> color/error Error: $color: 1 is not a color. , -1 | a {b: scale-color(1)} +2 | a {b: color.scale(1)} | ^^^^^^^^^^^^^^ ' - input.scss 1:7 root stylesheet + input.scss 2:7 root stylesheet <===> ================================================================================ <===> red/input.scss -a {b: scale-color(red, $red: c)} +@use 'sass:color'; +a {b: color.scale(red, $red: c)} <===> red/error Error: $red: c is not a number. , -1 | a {b: scale-color(red, $red: c)} +2 | a {b: color.scale(red, $red: c)} | ^^^^^^^^^^^^^^^^^^^^^^^^^ ' - input.scss 1:7 root stylesheet + input.scss 2:7 root stylesheet <===> ================================================================================ <===> green/input.scss -a {b: scale-color(red, $green: c)} +@use 'sass:color'; +a {b: color.scale(red, $green: c)} <===> green/error Error: $green: c is not a number. , -1 | a {b: scale-color(red, $green: c)} +2 | a {b: color.scale(red, $green: c)} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^ ' - input.scss 1:7 root stylesheet + input.scss 2:7 root stylesheet <===> ================================================================================ <===> blue/input.scss -a {b: scale-color(red, $blue: c)} +@use 'sass:color'; +a {b: color.scale(red, $blue: c)} <===> blue/error Error: $blue: c is not a number. , -1 | a {b: scale-color(red, $blue: c)} +2 | a {b: color.scale(red, $blue: c)} | ^^^^^^^^^^^^^^^^^^^^^^^^^^ ' - input.scss 1:7 root stylesheet + input.scss 2:7 root stylesheet <===> ================================================================================ <===> saturation/input.scss -a {b: scale-color(red, $saturation: c)} +@use 'sass:color'; +a {b: color.scale(red, $saturation: c)} <===> saturation/error Error: $saturation: c is not a number. , -1 | a {b: scale-color(red, $saturation: c)} +2 | a {b: color.scale(red, $saturation: c)} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ' - input.scss 1:7 root stylesheet + input.scss 2:7 root stylesheet <===> ================================================================================ <===> lightness/input.scss -a {b: scale-color(red, $lightness: c)} +@use 'sass:color'; +a {b: color.scale(red, $lightness: c)} <===> lightness/error Error: $lightness: c is not a number. , -1 | a {b: scale-color(red, $lightness: c)} +2 | a {b: color.scale(red, $lightness: c)} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ' - input.scss 1:7 root stylesheet + input.scss 2:7 root stylesheet <===> ================================================================================ <===> alpha/input.scss -a {b: scale-color(red, $alpha: c)} +@use 'sass:color'; +a {b: color.scale(red, $alpha: c)} <===> alpha/error Error: $alpha: c is not a number. , -1 | a {b: scale-color(red, $alpha: c)} +2 | a {b: color.scale(red, $alpha: c)} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^ ' - input.scss 1:7 root stylesheet + input.scss 2:7 root stylesheet <===> ================================================================================ <===> blackness/input.scss -a {b: scale-color(red, $blackness: c)} +@use 'sass:color'; +a {b: color.scale(red, $blackness: c)} <===> blackness/error Error: $blackness: c is not a number. , -1 | a {b: scale-color(red, $blackness: c)} +2 | a {b: color.scale(red, $blackness: c)} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ' - input.scss 1:7 root stylesheet + input.scss 2:7 root stylesheet <===> ================================================================================ <===> whiteness/input.scss -a {b: scale-color(red, $whiteness: c)} +@use 'sass:color'; +a {b: color.scale(red, $whiteness: c)} <===> whiteness/error Error: $whiteness: c is not a number. , -1 | a {b: scale-color(red, $whiteness: c)} +2 | a {b: color.scale(red, $whiteness: c)} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ' - input.scss 1:7 root stylesheet - + input.scss 2:7 root stylesheet diff --git a/spec/core_functions/color/scale_color/error/units.hrx b/spec/core_functions/color/scale/error/units.hrx similarity index 63% rename from spec/core_functions/color/scale_color/error/units.hrx rename to spec/core_functions/color/scale/error/units.hrx index 395f26a30..29b67c503 100644 --- a/spec/core_functions/color/scale_color/error/units.hrx +++ b/spec/core_functions/color/scale/error/units.hrx @@ -1,206 +1,221 @@ <===> none/red/input.scss -a {b: scale-color(red, $red: 1px)} +@use 'sass:color'; +a {b: color.scale(red, $red: 1px)} <===> none/red/error Error: $red: Expected 1px to have unit "%". , -1 | a {b: scale-color(red, $red: 1px)} +2 | a {b: color.scale(red, $red: 1px)} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^ ' - input.scss 1:7 root stylesheet + input.scss 2:7 root stylesheet <===> ================================================================================ <===> none/green/input.scss -a {b: scale-color(green, $green: 1)} +@use 'sass:color'; +a {b: color.scale(green, $green: 1)} <===> none/green/error Error: $green: Expected 1 to have unit "%". , -1 | a {b: scale-color(green, $green: 1)} +2 | a {b: color.scale(green, $green: 1)} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ' - input.scss 1:7 root stylesheet + input.scss 2:7 root stylesheet <===> ================================================================================ <===> none/blue/input.scss -a {b: scale-color(blue, $blue: 1)} +@use 'sass:color'; +a {b: color.scale(blue, $blue: 1)} <===> none/blue/error Error: $blue: Expected 1 to have unit "%". , -1 | a {b: scale-color(blue, $blue: 1)} +2 | a {b: color.scale(blue, $blue: 1)} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^ ' - input.scss 1:7 root stylesheet + input.scss 2:7 root stylesheet <===> ================================================================================ <===> none/saturation/input.scss -a {b: scale-color(red, $saturation: 1)} +@use 'sass:color'; +a {b: color.scale(red, $saturation: 1)} <===> none/saturation/error Error: $saturation: Expected 1 to have unit "%". , -1 | a {b: scale-color(red, $saturation: 1)} +2 | a {b: color.scale(red, $saturation: 1)} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ' - input.scss 1:7 root stylesheet + input.scss 2:7 root stylesheet <===> ================================================================================ <===> none/lightness/input.scss -a {b: scale-color(red, $lightness: 1)} +@use 'sass:color'; +a {b: color.scale(red, $lightness: 1)} <===> none/lightness/error Error: $lightness: Expected 1 to have unit "%". , -1 | a {b: scale-color(red, $lightness: 1)} +2 | a {b: color.scale(red, $lightness: 1)} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ' - input.scss 1:7 root stylesheet + input.scss 2:7 root stylesheet <===> ================================================================================ <===> none/whiteness/input.scss -a {b: scale-color(white, $whiteness: 1)} +@use 'sass:color'; +a {b: color.scale(white, $whiteness: 1)} <===> none/whiteness/error Error: $whiteness: Expected 1 to have unit "%". , -1 | a {b: scale-color(white, $whiteness: 1)} +2 | a {b: color.scale(white, $whiteness: 1)} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ' - input.scss 1:7 root stylesheet - + input.scss 2:7 root stylesheet <===> ================================================================================ <===> none/blackness/input.scss -a {b: scale-color(black, $blackness: 1)} +@use 'sass:color'; +a {b: color.scale(black, $blackness: 1)} <===> none/blackness/error Error: $blackness: Expected 1 to have unit "%". , -1 | a {b: scale-color(black, $blackness: 1)} +2 | a {b: color.scale(black, $blackness: 1)} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ' - input.scss 1:7 root stylesheet + input.scss 2:7 root stylesheet <===> ================================================================================ <===> none/alpha/input.scss -a {b: scale-color(red, $alpha: 1)} +@use 'sass:color'; +a {b: color.scale(red, $alpha: 1)} <===> none/alpha/error Error: $alpha: Expected 1 to have unit "%". , -1 | a {b: scale-color(red, $alpha: 1)} +2 | a {b: color.scale(red, $alpha: 1)} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^ ' - input.scss 1:7 root stylesheet + input.scss 2:7 root stylesheet <===> ================================================================================ <===> wrong/red/input.scss -a {b: scale-color(red, $red: 1px)} +@use 'sass:color'; +a {b: color.scale(red, $red: 1px)} <===> wrong/red/error Error: $red: Expected 1px to have unit "%". , -1 | a {b: scale-color(red, $red: 1px)} +2 | a {b: color.scale(red, $red: 1px)} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^ ' - input.scss 1:7 root stylesheet + input.scss 2:7 root stylesheet <===> ================================================================================ <===> wrong/green/input.scss -a {b: scale-color(green, $green: 1px)} +@use 'sass:color'; +a {b: color.scale(green, $green: 1px)} <===> wrong/green/error Error: $green: Expected 1px to have unit "%". , -1 | a {b: scale-color(green, $green: 1px)} +2 | a {b: color.scale(green, $green: 1px)} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ' - input.scss 1:7 root stylesheet + input.scss 2:7 root stylesheet <===> ================================================================================ <===> wrong/blue/input.scss -a {b: scale-color(blue, $blue: 1px)} +@use 'sass:color'; +a {b: color.scale(blue, $blue: 1px)} <===> wrong/blue/error Error: $blue: Expected 1px to have unit "%". , -1 | a {b: scale-color(blue, $blue: 1px)} +2 | a {b: color.scale(blue, $blue: 1px)} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ' - input.scss 1:7 root stylesheet + input.scss 2:7 root stylesheet <===> ================================================================================ <===> wrong/saturation/input.scss -a {b: scale-color(red, $saturation: 1px)} +@use 'sass:color'; +a {b: color.scale(red, $saturation: 1px)} <===> wrong/saturation/error Error: $saturation: Expected 1px to have unit "%". , -1 | a {b: scale-color(red, $saturation: 1px)} +2 | a {b: color.scale(red, $saturation: 1px)} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ' - input.scss 1:7 root stylesheet + input.scss 2:7 root stylesheet <===> ================================================================================ <===> wrong/lightness/input.scss -a {b: scale-color(red, $lightness: 1px)} +@use 'sass:color'; +a {b: color.scale(red, $lightness: 1px)} <===> wrong/lightness/error Error: $lightness: Expected 1px to have unit "%". , -1 | a {b: scale-color(red, $lightness: 1px)} +2 | a {b: color.scale(red, $lightness: 1px)} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ' - input.scss 1:7 root stylesheet + input.scss 2:7 root stylesheet <===> ================================================================================ <===> wrong/whiteness/input.scss -a {b: scale-color(white, $whiteness: 1px)} +@use 'sass:color'; +a {b: color.scale(white, $whiteness: 1px)} <===> wrong/whiteness/error Error: $whiteness: Expected 1px to have unit "%". , -1 | a {b: scale-color(white, $whiteness: 1px)} +2 | a {b: color.scale(white, $whiteness: 1px)} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ' - input.scss 1:7 root stylesheet + input.scss 2:7 root stylesheet <===> ================================================================================ <===> wrong/blackness/input.scss -a {b: scale-color(black, $blackness: 1px)} +@use 'sass:color'; +a {b: color.scale(black, $blackness: 1px)} <===> wrong/blackness/error Error: $blackness: Expected 1px to have unit "%". , -1 | a {b: scale-color(black, $blackness: 1px)} +2 | a {b: color.scale(black, $blackness: 1px)} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ' - input.scss 1:7 root stylesheet + input.scss 2:7 root stylesheet <===> ================================================================================ <===> wrong/alpha/input.scss -a {b: scale-color(red, $alpha: 1px)} +@use 'sass:color'; +a {b: color.scale(red, $alpha: 1px)} <===> wrong/alpha/error Error: $alpha: Expected 1px to have unit "%". , -1 | a {b: scale-color(red, $alpha: 1px)} +2 | a {b: color.scale(red, $alpha: 1px)} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ' - input.scss 1:7 root stylesheet + input.scss 2:7 root stylesheet diff --git a/spec/core_functions/color/scale/global.hrx b/spec/core_functions/color/scale/global.hrx new file mode 100644 index 000000000..ce1704d54 --- /dev/null +++ b/spec/core_functions/color/scale/global.hrx @@ -0,0 +1,17 @@ +<===> legacy/input.scss +a {b: scale-color(pink, $blue: 20%)} + +<===> legacy/output.css +a { + b: rgb(255, 192, 213.4); +} + +<===> +================================================================================ +<===> non_legacy/input.scss +a {b: scale-color(pink, $chroma: -10%, $space: oklch)} + +<===> non_legacy/output.css +a { + b: rgb(250.9720040643, 194.0861924561, 203.8303793932); +} diff --git a/spec/core_functions/color/scale_color/hsl.hrx b/spec/core_functions/color/scale/hsl.hrx similarity index 73% rename from spec/core_functions/color/scale_color/hsl.hrx rename to spec/core_functions/color/scale/hsl.hrx index 3aadddd40..41ccb4a4e 100644 --- a/spec/core_functions/color/scale_color/hsl.hrx +++ b/spec/core_functions/color/scale/hsl.hrx @@ -1,5 +1,6 @@ <===> saturation/max/input.scss -a {b: scale-color(plum, $saturation: 100%)} +@use 'sass:color'; +a {b: color.scale(plum, $saturation: 100%)} <===> saturation/max/output.css a { @@ -9,7 +10,8 @@ a { <===> ================================================================================ <===> saturation/zero/input.scss -a {b: scale-color(plum, $saturation: 0%)} +@use 'sass:color'; +a {b: color.scale(plum, $saturation: 0%)} <===> saturation/zero/output.css a { @@ -19,7 +21,8 @@ a { <===> ================================================================================ <===> saturation/min/input.scss -a {b: scale-color(plum, $saturation: -100%)} +@use 'sass:color'; +a {b: color.scale(plum, $saturation: -100%)} <===> saturation/min/output.css a { @@ -29,7 +32,8 @@ a { <===> ================================================================================ <===> saturation/high/input.scss -a {b: scale-color(plum, $saturation: 67%)} +@use 'sass:color'; +a {b: color.scale(plum, $saturation: 67%)} <===> saturation/high/output.css a { @@ -39,7 +43,8 @@ a { <===> ================================================================================ <===> saturation/low/input.scss -a {b: scale-color(plum, $saturation: -43%)} +@use 'sass:color'; +a {b: color.scale(plum, $saturation: -43%)} <===> saturation/low/output.css a { @@ -49,7 +54,8 @@ a { <===> ================================================================================ <===> lightness/max/input.scss -a {b: scale-color(red, $lightness: 100%)} +@use 'sass:color'; +a {b: color.scale(red, $lightness: 100%)} <===> lightness/max/output.css a { @@ -59,7 +65,8 @@ a { <===> ================================================================================ <===> lightness/zero/input.scss -a {b: scale-color(red, $lightness: 0%)} +@use 'sass:color'; +a {b: color.scale(red, $lightness: 0%)} <===> lightness/zero/output.css a { @@ -69,7 +76,8 @@ a { <===> ================================================================================ <===> lightness/min/input.scss -a {b: scale-color(red, $lightness: -100%)} +@use 'sass:color'; +a {b: color.scale(red, $lightness: -100%)} <===> lightness/min/output.css a { @@ -79,7 +87,8 @@ a { <===> ================================================================================ <===> lightness/high/input.scss -a {b: scale-color(red, $lightness: 94%)} +@use 'sass:color'; +a {b: color.scale(red, $lightness: 94%)} <===> lightness/high/output.css a { @@ -89,7 +98,8 @@ a { <===> ================================================================================ <===> lightness/low/input.scss -a {b: scale-color(red, $lightness: -14%)} +@use 'sass:color'; +a {b: color.scale(red, $lightness: -14%)} <===> lightness/low/output.css a { @@ -99,7 +109,8 @@ a { <===> ================================================================================ <===> all/input.scss -a {b: scale-color(turquoise, $saturation: 24%, $lightness: -48%)} +@use 'sass:color'; +a {b: color.scale(turquoise, $saturation: 24%, $lightness: -48%)} <===> all/output.css a { @@ -109,7 +120,8 @@ a { <===> ================================================================================ <===> alpha_input/input.scss -a {b: scale-color(rgba(turquoise, 0.7), $saturation: 24%, $lightness: -48%)} +@use 'sass:color'; +a {b: color.scale(rgba(turquoise, 0.7), $saturation: 24%, $lightness: -48%)} <===> alpha_input/output.css a { @@ -119,7 +131,8 @@ a { <===> ================================================================================ <===> alpha_arg/input.scss -a {b: scale-color(turquoise, $saturation: 24%, $lightness: -48%, $alpha: -70%)} +@use 'sass:color'; +a {b: color.scale(turquoise, $saturation: 24%, $lightness: -48%, $alpha: -70%)} <===> alpha_arg/output.css a { @@ -129,7 +142,8 @@ a { <===> ================================================================================ <===> named/input.scss -a {b: scale-color($color: turquoise, $saturation: 24%, $lightness: -48%)} +@use 'sass:color'; +a {b: color.scale($color: turquoise, $saturation: 24%, $lightness: -48%)} <===> named/output.css a { diff --git a/spec/core_functions/color/scale_color/hwb.hrx b/spec/core_functions/color/scale/hwb.hrx similarity index 71% rename from spec/core_functions/color/scale_color/hwb.hrx rename to spec/core_functions/color/scale/hwb.hrx index 22e4305db..5c5559429 100644 --- a/spec/core_functions/color/scale_color/hwb.hrx +++ b/spec/core_functions/color/scale/hwb.hrx @@ -1,5 +1,6 @@ <===> whiteness/max/input.scss -a {b: scale-color(#66cc99, $whiteness: 100%)} +@use 'sass:color'; +a {b: color.scale(#66cc99, $whiteness: 100%)} <===> whiteness/max/output.css a { @@ -9,7 +10,8 @@ a { <===> ================================================================================ <===> whiteness/zero/input.scss -a {b: scale-color(#66cc99, $whiteness: 0%)} +@use 'sass:color'; +a {b: color.scale(#66cc99, $whiteness: 0%)} <===> whiteness/zero/output.css a { @@ -19,7 +21,8 @@ a { <===> ================================================================================ <===> whiteness/min/input.scss -a {b: scale-color(#66cc99, $whiteness: -100%)} +@use 'sass:color'; +a {b: color.scale(#66cc99, $whiteness: -100%)} <===> whiteness/min/output.css a { @@ -29,7 +32,8 @@ a { <===> ================================================================================ <===> whiteness/high/input.scss -a {b: scale-color(#33cc80, $whiteness: 50%)} +@use 'sass:color'; +a {b: color.scale(#33cc80, $whiteness: 50%)} <===> whiteness/high/output.css a { @@ -39,7 +43,8 @@ a { <===> ================================================================================ <===> whiteness/low/input.scss -a {b: scale-color(#66cc99, $whiteness: -50%)} +@use 'sass:color'; +a {b: color.scale(#66cc99, $whiteness: -50%)} <===> whiteness/low/output.css a { @@ -49,7 +54,8 @@ a { <===> ================================================================================ <===> blackness/max/input.scss -a {b: scale-color(#339966, $blackness: 100%)} +@use 'sass:color'; +a {b: color.scale(#339966, $blackness: 100%)} <===> blackness/max/output.css a { @@ -59,7 +65,8 @@ a { <===> ================================================================================ <===> blackness/zero/input.scss -a {b: scale-color(#339966, $blackness: 0%)} +@use 'sass:color'; +a {b: color.scale(#339966, $blackness: 0%)} <===> blackness/zero/output.css a { @@ -69,7 +76,8 @@ a { <===> ================================================================================ <===> blackness/min/input.scss -a {b: scale-color(#339966, $blackness: -100%)} +@use 'sass:color'; +a {b: color.scale(#339966, $blackness: -100%)} <===> blackness/min/output.css a { @@ -79,7 +87,8 @@ a { <===> ================================================================================ <===> blackness/high/input.scss -a {b: scale-color(#33cc80, $blackness: 50%)} +@use 'sass:color'; +a {b: color.scale(#33cc80, $blackness: 50%)} <===> blackness/high/output.css a { @@ -89,7 +98,8 @@ a { <===> ================================================================================ <===> blackness/low/input.scss -a {b: scale-color(#339966, $blackness: -50%)} +@use 'sass:color'; +a {b: color.scale(#339966, $blackness: -50%)} <===> blackness/low/output.css a { @@ -99,7 +109,8 @@ a { <===> ================================================================================ <===> all/input.scss -a {b: scale-color(#66cc99, $whiteness: -50%, $blackness: 50%)} +@use 'sass:color'; +a {b: color.scale(#66cc99, $whiteness: -50%, $blackness: 50%)} <===> all/output.css a { @@ -109,7 +120,8 @@ a { <===> ================================================================================ <===> alpha_input/input.scss -a {b: scale-color(rgba(#66cc99, 0.7), $whiteness: -50%, $blackness: 50%)} +@use 'sass:color'; +a {b: color.scale(rgba(#66cc99, 0.7), $whiteness: -50%, $blackness: 50%)} <===> alpha_input/output.css a { @@ -119,7 +131,8 @@ a { <===> ================================================================================ <===> alpha_arg/input.scss -a {b: scale-color(#66cc99, $whiteness: -50%, $blackness: 50%, $alpha: -70%)} +@use 'sass:color'; +a {b: color.scale(#66cc99, $whiteness: -50%, $blackness: 50%, $alpha: -70%)} <===> alpha_arg/output.css a { @@ -129,7 +142,8 @@ a { <===> ================================================================================ <===> named/input.scss -a {b: scale-color($color: #66cc99, $whiteness: -50%, $blackness: 50%)} +@use 'sass:color'; +a {b: color.scale($color: #66cc99, $whiteness: -50%, $blackness: 50%)} <===> named/output.css a { diff --git a/spec/core_functions/color/scale_color/no_rgb_hsl.hrx b/spec/core_functions/color/scale/no_rgb_hsl.hrx similarity index 71% rename from spec/core_functions/color/scale_color/no_rgb_hsl.hrx rename to spec/core_functions/color/scale/no_rgb_hsl.hrx index 634574c8c..c1a4c4a85 100644 --- a/spec/core_functions/color/scale_color/no_rgb_hsl.hrx +++ b/spec/core_functions/color/scale/no_rgb_hsl.hrx @@ -1,5 +1,6 @@ <===> positional/input.scss -a {b: scale-color(red)} +@use 'sass:color'; +a {b: color.scale(red)} <===> positional/output.css a { @@ -9,7 +10,8 @@ a { <===> ================================================================================ <===> named/input.scss -a {b: scale-color($color: red)} +@use 'sass:color'; +a {b: color.scale($color: red)} <===> named/output.css a { @@ -19,7 +21,8 @@ a { <===> ================================================================================ <===> alpha/max/input.scss -a {b: scale-color(rgba(red, 0.5), $alpha: 100%)} +@use 'sass:color'; +a {b: color.scale(rgba(red, 0.5), $alpha: 100%)} <===> alpha/max/output.css a { @@ -29,7 +32,8 @@ a { <===> ================================================================================ <===> alpha/zero/input.scss -a {b: scale-color(rgba(red, 0.5), $alpha: 0%)} +@use 'sass:color'; +a {b: color.scale(rgba(red, 0.5), $alpha: 0%)} <===> alpha/zero/output.css a { @@ -39,7 +43,8 @@ a { <===> ================================================================================ <===> alpha/min/input.scss -a {b: scale-color(rgba(red, 0.5), $alpha: -100%)} +@use 'sass:color'; +a {b: color.scale(rgba(red, 0.5), $alpha: -100%)} <===> alpha/min/output.css a { @@ -49,7 +54,8 @@ a { <===> ================================================================================ <===> alpha/high/input.scss -a {b: scale-color(rgba(red, 0.5), $alpha: 14%)} +@use 'sass:color'; +a {b: color.scale(rgba(red, 0.5), $alpha: 14%)} <===> alpha/high/output.css a { @@ -59,7 +65,8 @@ a { <===> ================================================================================ <===> alpha/low/input.scss -a {b: scale-color(rgba(red, 0.3), $alpha: -36%)} +@use 'sass:color'; +a {b: color.scale(rgba(red, 0.3), $alpha: -36%)} <===> alpha/low/output.css a { diff --git a/spec/core_functions/color/scale_color/rgb.hrx b/spec/core_functions/color/scale/rgb.hrx similarity index 72% rename from spec/core_functions/color/scale_color/rgb.hrx rename to spec/core_functions/color/scale/rgb.hrx index dade6d277..d80ba9482 100644 --- a/spec/core_functions/color/scale_color/rgb.hrx +++ b/spec/core_functions/color/scale/rgb.hrx @@ -1,5 +1,6 @@ <===> red/max/input.scss -a {b: scale-color(black, $red: 100%)} +@use 'sass:color'; +a {b: color.scale(black, $red: 100%)} <===> red/max/output.css a { @@ -9,7 +10,8 @@ a { <===> ================================================================================ <===> red/min/input.scss -a {b: scale-color(red, $red: -100%)} +@use 'sass:color'; +a {b: color.scale(red, $red: -100%)} <===> red/min/output.css a { @@ -19,7 +21,8 @@ a { <===> ================================================================================ <===> red/zero/input.scss -a {b: scale-color(black, $red: 0%)} +@use 'sass:color'; +a {b: color.scale(black, $red: 0%)} <===> red/zero/output.css a { @@ -29,7 +32,8 @@ a { <===> ================================================================================ <===> red/low/input.scss -a {b: scale-color(lightcoral, $red: -33%)} +@use 'sass:color'; +a {b: color.scale(lightcoral, $red: -33%)} <===> red/low/output.css a { @@ -39,7 +43,8 @@ a { <===> ================================================================================ <===> red/high/input.scss -a {b: scale-color(turquoise, $red: 86%)} +@use 'sass:color'; +a {b: color.scale(turquoise, $red: 86%)} <===> red/high/output.css a { @@ -49,7 +54,8 @@ a { <===> ================================================================================ <===> green/max/input.scss -a {b: scale-color(black, $green: 100%)} +@use 'sass:color'; +a {b: color.scale(black, $green: 100%)} <===> green/max/output.css a { @@ -59,7 +65,8 @@ a { <===> ================================================================================ <===> green/min/input.scss -a {b: scale-color(lime, $green: -100%)} +@use 'sass:color'; +a {b: color.scale(lime, $green: -100%)} <===> green/min/output.css a { @@ -69,7 +76,8 @@ a { <===> ================================================================================ <===> green/zero/input.scss -a {b: scale-color(black, $green: 0%)} +@use 'sass:color'; +a {b: color.scale(black, $green: 0%)} <===> green/zero/output.css a { @@ -79,7 +87,8 @@ a { <===> ================================================================================ <===> green/low/input.scss -a {b: scale-color(seagreen, $green: -86%)} +@use 'sass:color'; +a {b: color.scale(seagreen, $green: -86%)} <===> green/low/output.css a { @@ -89,7 +98,8 @@ a { <===> ================================================================================ <===> green/high/input.scss -a {b: scale-color(cadetblue, $green: 12%)} +@use 'sass:color'; +a {b: color.scale(cadetblue, $green: 12%)} <===> green/high/output.css a { @@ -99,7 +109,8 @@ a { <===> ================================================================================ <===> blue/max/input.scss -a {b: scale-color(black, $blue: 100%)} +@use 'sass:color'; +a {b: color.scale(black, $blue: 100%)} <===> blue/max/output.css a { @@ -109,7 +120,8 @@ a { <===> ================================================================================ <===> blue/min/input.scss -a {b: scale-color(blue, $blue: -100%)} +@use 'sass:color'; +a {b: color.scale(blue, $blue: -100%)} <===> blue/min/output.css a { @@ -119,7 +131,8 @@ a { <===> ================================================================================ <===> blue/zero/input.scss -a {b: scale-color(black, $blue: 0%)} +@use 'sass:color'; +a {b: color.scale(black, $blue: 0%)} <===> blue/zero/output.css a { @@ -129,7 +142,8 @@ a { <===> ================================================================================ <===> blue/low/input.scss -a {b: scale-color(slategray, $blue: -16%)} +@use 'sass:color'; +a {b: color.scale(slategray, $blue: -16%)} <===> blue/low/output.css a { @@ -139,7 +153,8 @@ a { <===> ================================================================================ <===> blue/high/input.scss -a {b: scale-color(salmon, $blue: 42%)} +@use 'sass:color'; +a {b: color.scale(salmon, $blue: 42%)} <===> blue/high/output.css a { @@ -149,7 +164,8 @@ a { <===> ================================================================================ <===> all/input.scss -a {b: scale-color(sienna, $red: 12%, $green: 24%, $blue: 48%)} +@use 'sass:color'; +a {b: color.scale(sienna, $red: 12%, $green: 24%, $blue: 48%)} <===> all/output.css a { @@ -159,7 +175,8 @@ a { <===> ================================================================================ <===> alpha_input/input.scss -a {b: scale-color(rgba(sienna, 0.3), $red: 12%, $green: 24%, $blue: 48%)} +@use 'sass:color'; +a {b: color.scale(rgba(sienna, 0.3), $red: 12%, $green: 24%, $blue: 48%)} <===> alpha_input/output.css a { @@ -169,7 +186,8 @@ a { <===> ================================================================================ <===> alpha_arg/input.scss -a {b: scale-color(sienna, $red: 12%, $green: 24%, $blue: 48%, $alpha: -70%)} +@use 'sass:color'; +a {b: color.scale(sienna, $red: 12%, $green: 24%, $blue: 48%, $alpha: -70%)} <===> alpha_arg/output.css a { @@ -179,7 +197,8 @@ a { <===> ================================================================================ <===> named/input.scss -a {b: scale-color($color: sienna, $red: 12%, $green: 24%, $blue: 48%)} +@use 'sass:color'; +a {b: color.scale($color: sienna, $red: 12%, $green: 24%, $blue: 48%)} <===> named/output.css a { From 36bf86a59943e774043e910f5c1d2d1b18755694 Mon Sep 17 00:00:00 2001 From: Natalie Weizenbaum Date: Tue, 7 May 2024 15:31:32 -0700 Subject: [PATCH 2/4] Add some Color 4 tests to `color.scale()` --- .../color/scale/error/bounds.hrx | 206 ++-------------- .../scale/error/incompatible_channel.hrx | 39 ++++ .../color/scale/error/polar.hrx | 39 ++++ .../color/scale/error/space.hrx | 25 ++ .../core_functions/color/scale/error/type.hrx | 28 +++ .../color/scale/error/units.hrx | 221 ------------------ .../color/scale/error/units/hsl.hrx | 53 +++++ .../color/scale/error/units/hwb.hrx | 53 +++++ .../color/scale/error/units/rgb.hrx | 81 +++++++ .../color/scale/no_channels.hrx | 19 ++ .../scale/{no_rgb_hsl.hrx => no_space.hrx} | 0 spec/core_functions/color/scale/space.hrx | 41 ++++ 12 files changed, 397 insertions(+), 408 deletions(-) create mode 100644 spec/core_functions/color/scale/error/incompatible_channel.hrx create mode 100644 spec/core_functions/color/scale/error/polar.hrx create mode 100644 spec/core_functions/color/scale/error/space.hrx delete mode 100644 spec/core_functions/color/scale/error/units.hrx create mode 100644 spec/core_functions/color/scale/error/units/hsl.hrx create mode 100644 spec/core_functions/color/scale/error/units/hwb.hrx create mode 100644 spec/core_functions/color/scale/error/units/rgb.hrx create mode 100644 spec/core_functions/color/scale/no_channels.hrx rename spec/core_functions/color/scale/{no_rgb_hsl.hrx => no_space.hrx} (100%) create mode 100644 spec/core_functions/color/scale/space.hrx diff --git a/spec/core_functions/color/scale/error/bounds.hrx b/spec/core_functions/color/scale/error/bounds.hrx index a07b42e14..1ef57005a 100644 --- a/spec/core_functions/color/scale/error/bounds.hrx +++ b/spec/core_functions/color/scale/error/bounds.hrx @@ -1,92 +1,8 @@ -<===> red/too_low/input.scss -@use 'sass:color'; -a {b: color.scale(red, $red: -100.001%)} - -<===> red/too_low/error -Error: $red: Expected -100.001% to be within -100% and 100%. - , -2 | a {b: color.scale(red, $red: -100.001%)} - | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ - ' - input.scss 2:7 root stylesheet - -<===> -================================================================================ -<===> red/too_high/input.scss -@use 'sass:color'; -a {b: color.scale(red, $red: 100.001%)} - -<===> red/too_high/error -Error: $red: Expected 100.001% to be within -100% and 100%. - , -2 | a {b: color.scale(red, $red: 100.001%)} - | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ - ' - input.scss 2:7 root stylesheet - -<===> -================================================================================ -<===> green/too_low/input.scss -@use 'sass:color'; -a {b: color.scale(green, $green: -100.001%)} - -<===> green/too_low/error -Error: $green: Expected -100.001% to be within -100% and 100%. - , -2 | a {b: color.scale(green, $green: -100.001%)} - | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ - ' - input.scss 2:7 root stylesheet - -<===> -================================================================================ -<===> green/too_high/input.scss -@use 'sass:color'; -a {b: color.scale(green, $green: 100.001%)} - -<===> green/too_high/error -Error: $green: Expected 100.001% to be within -100% and 100%. - , -2 | a {b: color.scale(green, $green: 100.001%)} - | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ - ' - input.scss 2:7 root stylesheet - -<===> -================================================================================ -<===> blue/too_low/input.scss -@use 'sass:color'; -a {b: color.scale(blue, $blue: -100.001%)} - -<===> blue/too_low/error -Error: $blue: Expected -100.001% to be within -100% and 100%. - , -2 | a {b: color.scale(blue, $blue: -100.001%)} - | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ - ' - input.scss 2:7 root stylesheet - -<===> -================================================================================ -<===> blue/too_high/input.scss -@use 'sass:color'; -a {b: color.scale(blue, $blue: 100.001%)} - -<===> blue/too_high/error -Error: $blue: Expected 100.001% to be within -100% and 100%. - , -2 | a {b: color.scale(blue, $blue: 100.001%)} - | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ - ' - input.scss 2:7 root stylesheet - -<===> -================================================================================ -<===> saturation/too_low/input.scss +<===> legacy/too_low/input.scss @use 'sass:color'; a {b: color.scale(red, $saturation: -100.001%)} -<===> saturation/too_low/error +<===> legacy/too_low/error Error: $saturation: Expected -100.001% to be within -100% and 100%. , 2 | a {b: color.scale(red, $saturation: -100.001%)} @@ -96,126 +12,42 @@ Error: $saturation: Expected -100.001% to be within -100% and 100%. <===> ================================================================================ -<===> saturation/too_high/input.scss -@use 'sass:color'; -a {b: color.scale(red, $saturation: 100.001%)} - -<===> saturation/too_high/error -Error: $saturation: Expected 100.001% to be within -100% and 100%. - , -2 | a {b: color.scale(red, $saturation: 100.001%)} - | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ - ' - input.scss 2:7 root stylesheet - -<===> -================================================================================ -<===> lightness/too_low/input.scss -@use 'sass:color'; -a {b: color.scale(red, $lightness: -100.001%)} - -<===> lightness/too_low/error -Error: $lightness: Expected -100.001% to be within -100% and 100%. - , -2 | a {b: color.scale(red, $lightness: -100.001%)} - | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ - ' - input.scss 2:7 root stylesheet - -<===> -================================================================================ -<===> lightness/too_high/input.scss -@use 'sass:color'; -a {b: color.scale(red, $lightness: 100.001%)} - -<===> lightness/too_high/error -Error: $lightness: Expected 100.001% to be within -100% and 100%. - , -2 | a {b: color.scale(red, $lightness: 100.001%)} - | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ - ' - input.scss 2:7 root stylesheet - -<===> -================================================================================ -<===> alpha/too_low/input.scss -@use 'sass:color'; -a {b: color.scale(red, $alpha: -100.001%)} - -<===> alpha/too_low/error -Error: $alpha: Expected -100.001% to be within -100% and 100%. - , -2 | a {b: color.scale(red, $alpha: -100.001%)} - | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ - ' - input.scss 2:7 root stylesheet - -<===> -================================================================================ -<===> alpha/too_high/input.scss -@use 'sass:color'; -a {b: color.scale(red, $alpha: 100.001%)} - -<===> alpha/too_high/error -Error: $alpha: Expected 100.001% to be within -100% and 100%. - , -2 | a {b: color.scale(red, $alpha: 100.001%)} - | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ - ' - input.scss 2:7 root stylesheet - -<===> -================================================================================ -<===> blackness/too_low/input.scss -@use 'sass:color'; -a {b: color.scale(red, $blackness: -100.001%)} - -<===> blackness/too_low/error -Error: $blackness: Expected -100.001% to be within -100% and 100%. - , -2 | a {b: color.scale(red, $blackness: -100.001%)} - | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ - ' - input.scss 2:7 root stylesheet - -<===> -================================================================================ -<===> blackness/too_high/input.scss +<===> legacy/too_high/input.scss @use 'sass:color'; -a {b: color.scale(red, $blackness: 100.001%)} +a {b: color.scale(red, $whiteness: 100.001%)} -<===> blackness/too_high/error -Error: $blackness: Expected 100.001% to be within -100% and 100%. +<===> legacy/too_high/error +Error: $whiteness: Expected 100.001% to be within -100% and 100%. , -2 | a {b: color.scale(red, $blackness: 100.001%)} +2 | a {b: color.scale(red, $whiteness: 100.001%)} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ' input.scss 2:7 root stylesheet <===> ================================================================================ -<===> whiteness/too_low/input.scss +<===> modern/too_low/input.scss @use 'sass:color'; -a {b: color.scale(red, $whiteness: -100.001%)} +a {b: color.scale(lab(50% -70 60), $a: -100.001%)} -<===> whiteness/too_low/error -Error: $whiteness: Expected -100.001% to be within -100% and 100%. +<===> modern/too_low/error +Error: $a: Expected -100.001% to be within -100% and 100%. , -2 | a {b: color.scale(red, $whiteness: -100.001%)} - | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ +2 | a {b: color.scale(lab(50% -70 60), $a: -100.001%)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ' input.scss 2:7 root stylesheet <===> ================================================================================ -<===> whiteness/too_high/input.scss +<===> modern/too_high/input.scss @use 'sass:color'; -a {b: color.scale(red, $whiteness: 100.001%)} +a {b: color.scale(lab(50% -70 60), $b: 100.001%)} -<===> whiteness/too_high/error -Error: $whiteness: Expected 100.001% to be within -100% and 100%. +<===> modern/too_high/error +Error: $b: Expected 100.001% to be within -100% and 100%. , -2 | a {b: color.scale(red, $whiteness: 100.001%)} - | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ +2 | a {b: color.scale(lab(50% -70 60), $b: 100.001%)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ' input.scss 2:7 root stylesheet diff --git a/spec/core_functions/color/scale/error/incompatible_channel.hrx b/spec/core_functions/color/scale/error/incompatible_channel.hrx new file mode 100644 index 000000000..d855830f1 --- /dev/null +++ b/spec/core_functions/color/scale/error/incompatible_channel.hrx @@ -0,0 +1,39 @@ +<===> legacy_space/input.scss +@use 'sass:color'; +a {b: color.scale(red, $chroma: 50%)} + +<===> legacy_space/error +Error: $chroma: Color space rgb doesn't have a channel with this name. + , +2 | a {b: color.scale(red, $chroma: 50%)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> legacy_channel/input.scss +@use 'sass:color'; +a {b: color.scale(color(srgb 0.2 0.5 0.7), $whiteness: 50%)} + +<===> legacy_channel/error +Error: $whiteness: Color space srgb doesn't have a channel with this name. + , +2 | a {b: color.scale(color(srgb 0.2 0.5 0.7), $whiteness: 50%)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> modern_both/input.scss +@use 'sass:color'; +a {b: color.scale(color(srgb 0.2 0.5 0.7), $chroma: 50%)} + +<===> modern_both/error +Error: $chroma: Color space srgb doesn't have a channel with this name. + , +2 | a {b: color.scale(color(srgb 0.2 0.5 0.7), $chroma: 50%)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet diff --git a/spec/core_functions/color/scale/error/polar.hrx b/spec/core_functions/color/scale/error/polar.hrx new file mode 100644 index 000000000..54ff18b39 --- /dev/null +++ b/spec/core_functions/color/scale/error/polar.hrx @@ -0,0 +1,39 @@ +<===> legacy/input.scss +@use 'sass:color'; +a {b: color.scale(white, $hue: 10%)} + +<===> legacy/error +Error: $hue: Channel isn't scalable. + , +2 | a {b: color.scale(white, $hue: 10%)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> lch/input.scss +@use 'sass:color'; +a {b: color.scale(lch(50% 30% 180deg), $hue: 10%)} + +<===> lch/error +Error: $hue: Channel isn't scalable. + , +2 | a {b: color.scale(lch(50% 30% 180deg), $hue: 10%)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> oklch/input.scss +@use 'sass:color'; +a {b: color.scale(lch(50% 30% 180deg), $hue: 10%)} + +<===> oklch/error +Error: $hue: Channel isn't scalable. + , +2 | a {b: color.scale(lch(50% 30% 180deg), $hue: 10%)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet diff --git a/spec/core_functions/color/scale/error/space.hrx b/spec/core_functions/color/scale/error/space.hrx new file mode 100644 index 000000000..5214992c0 --- /dev/null +++ b/spec/core_functions/color/scale/error/space.hrx @@ -0,0 +1,25 @@ +<===> unknown/input.scss +@use 'sass:color'; +a {b: color.scale(red, $space: c)} + +<===> unknown/error +Error: $space: Unknown color space "c". + , +2 | a {b: color.scale(red, $space: c)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> quoted/input.scss +@use 'sass:color'; +a {b: color.scale(red, $space: "lab")} + +<===> quoted/error +Error: $space: Expected "lab" to be an unquoted string. + , +2 | a {b: color.scale(red, $space: "lab")} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet diff --git a/spec/core_functions/color/scale/error/type.hrx b/spec/core_functions/color/scale/error/type.hrx index ba309f217..ad7eeddd7 100644 --- a/spec/core_functions/color/scale/error/type.hrx +++ b/spec/core_functions/color/scale/error/type.hrx @@ -94,6 +94,20 @@ Error: $alpha: c is not a number. ' input.scss 2:7 root stylesheet +<===> +================================================================================ +<===> none/input.scss +@use 'sass:color'; +a {b: color.change(red, $alpha: none)} + +<===> none/error +Error: $alpha: none is not a number. + , +2 | a {b: color.change(red, $alpha: none)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + <===> ================================================================================ <===> blackness/input.scss @@ -121,3 +135,17 @@ Error: $whiteness: c is not a number. | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ' input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> space/input.scss +@use 'sass:color'; +a {b: color.scale(red, $space: 1)} + +<===> space/error +Error: $space: 1 is not a string. + , +2 | a {b: color.scale(red, $space: 1)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet diff --git a/spec/core_functions/color/scale/error/units.hrx b/spec/core_functions/color/scale/error/units.hrx deleted file mode 100644 index 29b67c503..000000000 --- a/spec/core_functions/color/scale/error/units.hrx +++ /dev/null @@ -1,221 +0,0 @@ -<===> none/red/input.scss -@use 'sass:color'; -a {b: color.scale(red, $red: 1px)} - -<===> none/red/error -Error: $red: Expected 1px to have unit "%". - , -2 | a {b: color.scale(red, $red: 1px)} - | ^^^^^^^^^^^^^^^^^^^^^^^^^^^ - ' - input.scss 2:7 root stylesheet - -<===> -================================================================================ -<===> none/green/input.scss -@use 'sass:color'; -a {b: color.scale(green, $green: 1)} - -<===> none/green/error -Error: $green: Expected 1 to have unit "%". - , -2 | a {b: color.scale(green, $green: 1)} - | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ - ' - input.scss 2:7 root stylesheet - -<===> -================================================================================ -<===> none/blue/input.scss -@use 'sass:color'; -a {b: color.scale(blue, $blue: 1)} - -<===> none/blue/error -Error: $blue: Expected 1 to have unit "%". - , -2 | a {b: color.scale(blue, $blue: 1)} - | ^^^^^^^^^^^^^^^^^^^^^^^^^^^ - ' - input.scss 2:7 root stylesheet - -<===> -================================================================================ -<===> none/saturation/input.scss -@use 'sass:color'; -a {b: color.scale(red, $saturation: 1)} - -<===> none/saturation/error -Error: $saturation: Expected 1 to have unit "%". - , -2 | a {b: color.scale(red, $saturation: 1)} - | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ - ' - input.scss 2:7 root stylesheet - -<===> -================================================================================ -<===> none/lightness/input.scss -@use 'sass:color'; -a {b: color.scale(red, $lightness: 1)} - -<===> none/lightness/error -Error: $lightness: Expected 1 to have unit "%". - , -2 | a {b: color.scale(red, $lightness: 1)} - | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ - ' - input.scss 2:7 root stylesheet - -<===> -================================================================================ -<===> none/whiteness/input.scss -@use 'sass:color'; -a {b: color.scale(white, $whiteness: 1)} - -<===> none/whiteness/error -Error: $whiteness: Expected 1 to have unit "%". - , -2 | a {b: color.scale(white, $whiteness: 1)} - | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ - ' - input.scss 2:7 root stylesheet - -<===> -================================================================================ -<===> none/blackness/input.scss -@use 'sass:color'; -a {b: color.scale(black, $blackness: 1)} - -<===> none/blackness/error -Error: $blackness: Expected 1 to have unit "%". - , -2 | a {b: color.scale(black, $blackness: 1)} - | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ - ' - input.scss 2:7 root stylesheet - -<===> -================================================================================ -<===> none/alpha/input.scss -@use 'sass:color'; -a {b: color.scale(red, $alpha: 1)} - -<===> none/alpha/error -Error: $alpha: Expected 1 to have unit "%". - , -2 | a {b: color.scale(red, $alpha: 1)} - | ^^^^^^^^^^^^^^^^^^^^^^^^^^^ - ' - input.scss 2:7 root stylesheet - -<===> -================================================================================ -<===> wrong/red/input.scss -@use 'sass:color'; -a {b: color.scale(red, $red: 1px)} - -<===> wrong/red/error -Error: $red: Expected 1px to have unit "%". - , -2 | a {b: color.scale(red, $red: 1px)} - | ^^^^^^^^^^^^^^^^^^^^^^^^^^^ - ' - input.scss 2:7 root stylesheet - -<===> -================================================================================ -<===> wrong/green/input.scss -@use 'sass:color'; -a {b: color.scale(green, $green: 1px)} - -<===> wrong/green/error -Error: $green: Expected 1px to have unit "%". - , -2 | a {b: color.scale(green, $green: 1px)} - | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ - ' - input.scss 2:7 root stylesheet - -<===> -================================================================================ -<===> wrong/blue/input.scss -@use 'sass:color'; -a {b: color.scale(blue, $blue: 1px)} - -<===> wrong/blue/error -Error: $blue: Expected 1px to have unit "%". - , -2 | a {b: color.scale(blue, $blue: 1px)} - | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ - ' - input.scss 2:7 root stylesheet - -<===> -================================================================================ -<===> wrong/saturation/input.scss -@use 'sass:color'; -a {b: color.scale(red, $saturation: 1px)} - -<===> wrong/saturation/error -Error: $saturation: Expected 1px to have unit "%". - , -2 | a {b: color.scale(red, $saturation: 1px)} - | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ - ' - input.scss 2:7 root stylesheet - -<===> -================================================================================ -<===> wrong/lightness/input.scss -@use 'sass:color'; -a {b: color.scale(red, $lightness: 1px)} - -<===> wrong/lightness/error -Error: $lightness: Expected 1px to have unit "%". - , -2 | a {b: color.scale(red, $lightness: 1px)} - | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ - ' - input.scss 2:7 root stylesheet - -<===> -================================================================================ -<===> wrong/whiteness/input.scss -@use 'sass:color'; -a {b: color.scale(white, $whiteness: 1px)} - -<===> wrong/whiteness/error -Error: $whiteness: Expected 1px to have unit "%". - , -2 | a {b: color.scale(white, $whiteness: 1px)} - | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ - ' - input.scss 2:7 root stylesheet - -<===> -================================================================================ -<===> wrong/blackness/input.scss -@use 'sass:color'; -a {b: color.scale(black, $blackness: 1px)} - -<===> wrong/blackness/error -Error: $blackness: Expected 1px to have unit "%". - , -2 | a {b: color.scale(black, $blackness: 1px)} - | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ - ' - input.scss 2:7 root stylesheet - -<===> -================================================================================ -<===> wrong/alpha/input.scss -@use 'sass:color'; -a {b: color.scale(red, $alpha: 1px)} - -<===> wrong/alpha/error -Error: $alpha: Expected 1px to have unit "%". - , -2 | a {b: color.scale(red, $alpha: 1px)} - | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ - ' - input.scss 2:7 root stylesheet diff --git a/spec/core_functions/color/scale/error/units/hsl.hrx b/spec/core_functions/color/scale/error/units/hsl.hrx new file mode 100644 index 000000000..c08824457 --- /dev/null +++ b/spec/core_functions/color/scale/error/units/hsl.hrx @@ -0,0 +1,53 @@ +<===> none/saturation/input.scss +@use 'sass:color'; +a {b: color.scale(white, $saturation: 1)} + +<===> none/saturation/error +Error: $saturation: Expected 1 to have unit "%". + , +2 | a {b: color.scale(white, $saturation: 1)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> none/lightness/input.scss +@use 'sass:color'; +a {b: color.scale(white, $lightness: 1)} + +<===> none/lightness/error +Error: $lightness: Expected 1 to have unit "%". + , +2 | a {b: color.scale(white, $lightness: 1)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> wrong/saturation/input.scss +@use 'sass:color'; +a {b: color.scale(white, $saturation: 1px)} + +<===> wrong/saturation/error +Error: $saturation: Expected 1px to have unit "%". + , +2 | a {b: color.scale(white, $saturation: 1px)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> wrong/lightness/input.scss +@use 'sass:color'; +a {b: color.scale(white, $lightness: 1px)} + +<===> wrong/lightness/error +Error: $lightness: Expected 1px to have unit "%". + , +2 | a {b: color.scale(white, $lightness: 1px)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet diff --git a/spec/core_functions/color/scale/error/units/hwb.hrx b/spec/core_functions/color/scale/error/units/hwb.hrx new file mode 100644 index 000000000..7883c9e21 --- /dev/null +++ b/spec/core_functions/color/scale/error/units/hwb.hrx @@ -0,0 +1,53 @@ +<===> none/whiteness/input.scss +@use 'sass:color'; +a {b: color.scale(white, $whiteness: 1)} + +<===> none/whiteness/error +Error: $whiteness: Expected 1 to have unit "%". + , +2 | a {b: color.scale(white, $whiteness: 1)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> none/blackness/input.scss +@use 'sass:color'; +a {b: color.scale(white, $blackness: 1)} + +<===> none/blackness/error +Error: $blackness: Expected 1 to have unit "%". + , +2 | a {b: color.scale(white, $blackness: 1)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> wrong/whiteness/input.scss +@use 'sass:color'; +a {b: color.scale(white, $whiteness: 1px)} + +<===> wrong/whiteness/error +Error: $whiteness: Expected 1px to have unit "%". + , +2 | a {b: color.scale(white, $whiteness: 1px)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> wrong/blackness/input.scss +@use 'sass:color'; +a {b: color.scale(white, $blackness: 1px)} + +<===> wrong/blackness/error +Error: $blackness: Expected 1px to have unit "%". + , +2 | a {b: color.scale(white, $blackness: 1px)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet diff --git a/spec/core_functions/color/scale/error/units/rgb.hrx b/spec/core_functions/color/scale/error/units/rgb.hrx new file mode 100644 index 000000000..713f594fe --- /dev/null +++ b/spec/core_functions/color/scale/error/units/rgb.hrx @@ -0,0 +1,81 @@ +<===> none/red/input.scss +@use 'sass:color'; +a {b: color.scale(white, $red: 1)} + +<===> none/red/error +Error: $red: Expected 1 to have unit "%". + , +2 | a {b: color.scale(white, $red: 1)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> none/green/input.scss +@use 'sass:color'; +a {b: color.scale(white, $green: 1)} + +<===> none/green/error +Error: $green: Expected 1 to have unit "%". + , +2 | a {b: color.scale(white, $green: 1)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> none/blue/input.scss +@use 'sass:color'; +a {b: color.scale(white, $blue: 1)} + +<===> none/blue/error +Error: $blue: Expected 1 to have unit "%". + , +2 | a {b: color.scale(white, $blue: 1)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> wrong/red/input.scss +@use 'sass:color'; +a {b: color.scale(white, $red: 1px)} + +<===> wrong/red/error +Error: $red: Expected 1px to have unit "%". + , +2 | a {b: color.scale(white, $red: 1px)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> wrong/green/input.scss +@use 'sass:color'; +a {b: color.scale(white, $green: 1px)} + +<===> wrong/green/error +Error: $green: Expected 1px to have unit "%". + , +2 | a {b: color.scale(white, $green: 1px)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> wrong/blue/input.scss +@use 'sass:color'; +a {b: color.scale(white, $blue: 1px)} + +<===> wrong/blue/error +Error: $blue: Expected 1px to have unit "%". + , +2 | a {b: color.scale(white, $blue: 1px)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet diff --git a/spec/core_functions/color/scale/no_channels.hrx b/spec/core_functions/color/scale/no_channels.hrx new file mode 100644 index 000000000..8758389ad --- /dev/null +++ b/spec/core_functions/color/scale/no_channels.hrx @@ -0,0 +1,19 @@ +<===> identical/input.scss +@use 'sass:color'; +a {b: color.scale(oklch(50% 0.2 0deg), $space: lab)} + +<===> identical/output.css +a { + b: oklch(50% 0.2 0deg); +} + +<===> +================================================================================ +<===> powerless/input.scss +@use 'sass:color'; +a {b: color.scale(oklch(50% 0 0deg), $space: lab)} + +<===> powerless/output.css +a { + b: oklch(50% 0 none); +} diff --git a/spec/core_functions/color/scale/no_rgb_hsl.hrx b/spec/core_functions/color/scale/no_space.hrx similarity index 100% rename from spec/core_functions/color/scale/no_rgb_hsl.hrx rename to spec/core_functions/color/scale/no_space.hrx diff --git a/spec/core_functions/color/scale/space.hrx b/spec/core_functions/color/scale/space.hrx new file mode 100644 index 000000000..df196933a --- /dev/null +++ b/spec/core_functions/color/scale/space.hrx @@ -0,0 +1,41 @@ +<===> legacy/to_legacy/input.scss +@use 'sass:color'; +a {b: color.scale(red, $saturation: -10%, $space: hsl)} + +<===> legacy/to_legacy/output.css +a { + b: rgb(242.25, 12.75, 12.75); +} + +<===> +================================================================================ +<===> legacy/to_modern/input.scss +@use 'sass:color'; +a {b: color.scale(red, $a: 10%, $space: lab)} + +<===> legacy/to_modern/output.css +a { + b: hsl(352.5777091359, 128.657405446%, 44.6392534152%); +} + +<===> +================================================================================ +<===> modern/to_legacy/input.scss +@use 'sass:color'; +a {b: color.scale(lab(50% 10 -20), $saturation: -20%, $space: hsl)} + +<===> modern/to_legacy/output.css +a { + b: lab(51.1280465895% 7.8762091679 -15.9907381545); +} + +<===> +================================================================================ +<===> modern/to_modern/input.scss +@use 'sass:color'; +a {b: color.scale(lab(50% 10 -20), $chroma: 20%, $space: oklch)} + +<===> modern/to_modern/output.css +a { + b: lab(48.9487508713% 24.2085150873 -41.732226413); +} From ae2d0656be5a29117815edb05265313d1c2b5877 Mon Sep 17 00:00:00 2001 From: Natalie Weizenbaum Date: Tue, 7 May 2024 16:38:20 -0700 Subject: [PATCH 3/4] Add specs for new color spaces --- spec/core_functions/color/scale/a98_rgb.hrx | 225 ++++++++++++++++++ .../core_functions/color/scale/display_p3.hrx | 225 ++++++++++++++++++ .../color/scale/error/units/a98_rgb.hrx | 81 +++++++ .../color/scale/error/units/display_p3.hrx | 81 +++++++ .../color/scale/error/units/lab.hrx | 81 +++++++ .../color/scale/error/units/lch.hrx | 53 +++++ .../color/scale/error/units/oklab.hrx | 81 +++++++ .../color/scale/error/units/oklch.hrx | 53 +++++ .../color/scale/error/units/prophoto_rgb.hrx | 81 +++++++ .../color/scale/error/units/rec2020.hrx | 81 +++++++ .../color/scale/error/units/srgb.hrx | 81 +++++++ .../color/scale/error/units/srgb_linear.hrx | 81 +++++++ .../color/scale/error/units/xyz_d50.hrx | 81 +++++++ .../color/scale/error/units/xyz_d65.hrx | 81 +++++++ spec/core_functions/color/scale/lab.hrx | 217 +++++++++++++++++ spec/core_functions/color/scale/lch.hrx | 158 ++++++++++++ spec/core_functions/color/scale/oklab.hrx | 217 +++++++++++++++++ .../color/scale/out_of_gamut.hrx | 41 ++++ .../color/scale/prophoto_rgb.hrx | 225 ++++++++++++++++++ spec/core_functions/color/scale/rec2020.hrx | 225 ++++++++++++++++++ spec/core_functions/color/scale/srgb.hrx | 223 +++++++++++++++++ .../color/scale/srgb_linear.hrx | 225 ++++++++++++++++++ spec/core_functions/color/scale/xyz_d50.hrx | 217 +++++++++++++++++ spec/core_functions/color/scale/xyz_d65.hrx | 217 +++++++++++++++++ 24 files changed, 3331 insertions(+) create mode 100644 spec/core_functions/color/scale/a98_rgb.hrx create mode 100644 spec/core_functions/color/scale/display_p3.hrx create mode 100644 spec/core_functions/color/scale/error/units/a98_rgb.hrx create mode 100644 spec/core_functions/color/scale/error/units/display_p3.hrx create mode 100644 spec/core_functions/color/scale/error/units/lab.hrx create mode 100644 spec/core_functions/color/scale/error/units/lch.hrx create mode 100644 spec/core_functions/color/scale/error/units/oklab.hrx create mode 100644 spec/core_functions/color/scale/error/units/oklch.hrx create mode 100644 spec/core_functions/color/scale/error/units/prophoto_rgb.hrx create mode 100644 spec/core_functions/color/scale/error/units/rec2020.hrx create mode 100644 spec/core_functions/color/scale/error/units/srgb.hrx create mode 100644 spec/core_functions/color/scale/error/units/srgb_linear.hrx create mode 100644 spec/core_functions/color/scale/error/units/xyz_d50.hrx create mode 100644 spec/core_functions/color/scale/error/units/xyz_d65.hrx create mode 100644 spec/core_functions/color/scale/lab.hrx create mode 100644 spec/core_functions/color/scale/lch.hrx create mode 100644 spec/core_functions/color/scale/oklab.hrx create mode 100644 spec/core_functions/color/scale/out_of_gamut.hrx create mode 100644 spec/core_functions/color/scale/prophoto_rgb.hrx create mode 100644 spec/core_functions/color/scale/rec2020.hrx create mode 100644 spec/core_functions/color/scale/srgb.hrx create mode 100644 spec/core_functions/color/scale/srgb_linear.hrx create mode 100644 spec/core_functions/color/scale/xyz_d50.hrx create mode 100644 spec/core_functions/color/scale/xyz_d65.hrx diff --git a/spec/core_functions/color/scale/a98_rgb.hrx b/spec/core_functions/color/scale/a98_rgb.hrx new file mode 100644 index 000000000..16e70f025 --- /dev/null +++ b/spec/core_functions/color/scale/a98_rgb.hrx @@ -0,0 +1,225 @@ +<===> red/max/input.scss +@use 'sass:color'; +a {b: color.scale(color(a98-rgb 0.2 0.5 0.7), $red: 100%)} + +<===> red/max/output.css +a { + b: color(a98-rgb 1 0.5 0.7); +} + +<===> +================================================================================ +<===> red/min/input.scss +@use 'sass:color'; +a {b: color.scale(color(a98-rgb 0.2 0.5 0.7), $red: -100%)} + +<===> red/min/output.css +a { + b: color(a98-rgb 0 0.5 0.7); +} + +<===> +================================================================================ +<===> red/zero/input.scss +@use 'sass:color'; +a {b: color.scale(color(a98-rgb 0.2 0.5 0.7), $red: 0%)} + +<===> red/zero/output.css +a { + b: color(a98-rgb 0.2 0.5 0.7); +} + +<===> +================================================================================ +<===> red/low/input.scss +@use 'sass:color'; +a {b: color.scale(color(a98-rgb 0.2 0.5 0.7), $red: -33%)} + +<===> red/low/output.css +a { + b: color(a98-rgb 0.134 0.5 0.7); +} + +<===> +================================================================================ +<===> red/high/input.scss +@use 'sass:color'; +a {b: color.scale(color(a98-rgb 0.2 0.5 0.7), $red: 86%)} + +<===> red/high/output.css +a { + b: color(a98-rgb 0.888 0.5 0.7); +} + +<===> +================================================================================ +<===> green/max/input.scss +@use 'sass:color'; +a {b: color.scale(color(a98-rgb 0.2 0.5 0.7), $green: 100%)} + +<===> green/max/output.css +a { + b: color(a98-rgb 0.2 1 0.7); +} + +<===> +================================================================================ +<===> green/min/input.scss +@use 'sass:color'; +a {b: color.scale(color(a98-rgb 0.2 0.5 0.7), $green: -100%)} + +<===> green/min/output.css +a { + b: color(a98-rgb 0.2 0 0.7); +} + +<===> +================================================================================ +<===> green/zero/input.scss +@use 'sass:color'; +a {b: color.scale(color(a98-rgb 0.2 0.5 0.7), $green: 0%)} + +<===> green/zero/output.css +a { + b: color(a98-rgb 0.2 0.5 0.7); +} + +<===> +================================================================================ +<===> green/low/input.scss +@use 'sass:color'; +a {b: color.scale(color(a98-rgb 0.2 0.5 0.7), $green: -86%)} + +<===> green/low/output.css +a { + b: color(a98-rgb 0.2 0.07 0.7); +} + +<===> +================================================================================ +<===> green/high/input.scss +@use 'sass:color'; +a {b: color.scale(color(a98-rgb 0.2 0.5 0.7), $green: 12%)} + +<===> green/high/output.css +a { + b: color(a98-rgb 0.2 0.56 0.7); +} + +<===> +================================================================================ +<===> blue/max/input.scss +@use 'sass:color'; +a {b: color.scale(color(a98-rgb 0.2 0.5 0.7), $blue: 100%)} + +<===> blue/max/output.css +a { + b: color(a98-rgb 0.2 0.5 1); +} + +<===> +================================================================================ +<===> blue/min/input.scss +@use 'sass:color'; +a {b: color.scale(color(a98-rgb 0.2 0.5 0.7), $blue: -100%)} + +<===> blue/min/output.css +a { + b: color(a98-rgb 0.2 0.5 0); +} + +<===> +================================================================================ +<===> blue/zero/input.scss +@use 'sass:color'; +a {b: color.scale(color(a98-rgb 0.2 0.5 0.7), $blue: 0%)} + +<===> blue/zero/output.css +a { + b: color(a98-rgb 0.2 0.5 0.7); +} + +<===> +================================================================================ +<===> blue/low/input.scss +@use 'sass:color'; +a {b: color.scale(color(a98-rgb 0.2 0.5 0.7), $blue: -16%)} + +<===> blue/low/output.css +a { + b: color(a98-rgb 0.2 0.5 0.588); +} + +<===> +================================================================================ +<===> blue/high/input.scss +@use 'sass:color'; +a {b: color.scale(color(a98-rgb 0.2 0.5 0.7), $blue: 42%)} + +<===> blue/high/output.css +a { + b: color(a98-rgb 0.2 0.5 0.826); +} + +<===> +================================================================================ +<===> all/input.scss +@use 'sass:color'; +a { + b: color.scale( + color(a98-rgb 0.2 0.5 0.7), $red: 12%, $green: 24%, $blue: 48% + ); +} + +<===> all/output.css +a { + b: color(a98-rgb 0.296 0.62 0.844); +} + +<===> +================================================================================ +<===> alpha_input/input.scss +@use 'sass:color'; +a { + b: color.scale( + color(a98-rgb 0.2 0.5 0.7 / 0.3), + $red: 12%, $green: 24%, $blue: 48% + ); +} + +<===> alpha_input/output.css +a { + b: color(a98-rgb 0.296 0.62 0.844 / 0.3); +} + +<===> +================================================================================ +<===> alpha_arg/input.scss +@use 'sass:color'; +a { + b: color.scale( + color(a98-rgb 0.2 0.5 0.7), + $red: 12%, $green: 24%, $blue: 48%, $alpha: -70% + ); +} + +<===> alpha_arg/output.css +a { + b: color(a98-rgb 0.296 0.62 0.844 / 0.3); +} + +<===> +================================================================================ +<===> named/input.scss +@use 'sass:color'; +a { + b: color.scale( + $color: color(a98-rgb 0.2 0.5 0.7), + $red: 12%, $green: 24%, $blue: 48% + ); +} + +<===> named/output.css +a { + b: color(a98-rgb 0.296 0.62 0.844); +} diff --git a/spec/core_functions/color/scale/display_p3.hrx b/spec/core_functions/color/scale/display_p3.hrx new file mode 100644 index 000000000..3f962c398 --- /dev/null +++ b/spec/core_functions/color/scale/display_p3.hrx @@ -0,0 +1,225 @@ +<===> red/max/input.scss +@use 'sass:color'; +a {b: color.scale(color(display-p3 0.2 0.5 0.7), $red: 100%)} + +<===> red/max/output.css +a { + b: color(display-p3 1 0.5 0.7); +} + +<===> +================================================================================ +<===> red/min/input.scss +@use 'sass:color'; +a {b: color.scale(color(display-p3 0.2 0.5 0.7), $red: -100%)} + +<===> red/min/output.css +a { + b: color(display-p3 0 0.5 0.7); +} + +<===> +================================================================================ +<===> red/zero/input.scss +@use 'sass:color'; +a {b: color.scale(color(display-p3 0.2 0.5 0.7), $red: 0%)} + +<===> red/zero/output.css +a { + b: color(display-p3 0.2 0.5 0.7); +} + +<===> +================================================================================ +<===> red/low/input.scss +@use 'sass:color'; +a {b: color.scale(color(display-p3 0.2 0.5 0.7), $red: -33%)} + +<===> red/low/output.css +a { + b: color(display-p3 0.134 0.5 0.7); +} + +<===> +================================================================================ +<===> red/high/input.scss +@use 'sass:color'; +a {b: color.scale(color(display-p3 0.2 0.5 0.7), $red: 86%)} + +<===> red/high/output.css +a { + b: color(display-p3 0.888 0.5 0.7); +} + +<===> +================================================================================ +<===> green/max/input.scss +@use 'sass:color'; +a {b: color.scale(color(display-p3 0.2 0.5 0.7), $green: 100%)} + +<===> green/max/output.css +a { + b: color(display-p3 0.2 1 0.7); +} + +<===> +================================================================================ +<===> green/min/input.scss +@use 'sass:color'; +a {b: color.scale(color(display-p3 0.2 0.5 0.7), $green: -100%)} + +<===> green/min/output.css +a { + b: color(display-p3 0.2 0 0.7); +} + +<===> +================================================================================ +<===> green/zero/input.scss +@use 'sass:color'; +a {b: color.scale(color(display-p3 0.2 0.5 0.7), $green: 0%)} + +<===> green/zero/output.css +a { + b: color(display-p3 0.2 0.5 0.7); +} + +<===> +================================================================================ +<===> green/low/input.scss +@use 'sass:color'; +a {b: color.scale(color(display-p3 0.2 0.5 0.7), $green: -86%)} + +<===> green/low/output.css +a { + b: color(display-p3 0.2 0.07 0.7); +} + +<===> +================================================================================ +<===> green/high/input.scss +@use 'sass:color'; +a {b: color.scale(color(display-p3 0.2 0.5 0.7), $green: 12%)} + +<===> green/high/output.css +a { + b: color(display-p3 0.2 0.56 0.7); +} + +<===> +================================================================================ +<===> blue/max/input.scss +@use 'sass:color'; +a {b: color.scale(color(display-p3 0.2 0.5 0.7), $blue: 100%)} + +<===> blue/max/output.css +a { + b: color(display-p3 0.2 0.5 1); +} + +<===> +================================================================================ +<===> blue/min/input.scss +@use 'sass:color'; +a {b: color.scale(color(display-p3 0.2 0.5 0.7), $blue: -100%)} + +<===> blue/min/output.css +a { + b: color(display-p3 0.2 0.5 0); +} + +<===> +================================================================================ +<===> blue/zero/input.scss +@use 'sass:color'; +a {b: color.scale(color(display-p3 0.2 0.5 0.7), $blue: 0%)} + +<===> blue/zero/output.css +a { + b: color(display-p3 0.2 0.5 0.7); +} + +<===> +================================================================================ +<===> blue/low/input.scss +@use 'sass:color'; +a {b: color.scale(color(display-p3 0.2 0.5 0.7), $blue: -16%)} + +<===> blue/low/output.css +a { + b: color(display-p3 0.2 0.5 0.588); +} + +<===> +================================================================================ +<===> blue/high/input.scss +@use 'sass:color'; +a {b: color.scale(color(display-p3 0.2 0.5 0.7), $blue: 42%)} + +<===> blue/high/output.css +a { + b: color(display-p3 0.2 0.5 0.826); +} + +<===> +================================================================================ +<===> all/input.scss +@use 'sass:color'; +a { + b: color.scale( + color(display-p3 0.2 0.5 0.7), $red: 12%, $green: 24%, $blue: 48% + ); +} + +<===> all/output.css +a { + b: color(display-p3 0.296 0.62 0.844); +} + +<===> +================================================================================ +<===> alpha_input/input.scss +@use 'sass:color'; +a { + b: color.scale( + color(display-p3 0.2 0.5 0.7 / 0.3), + $red: 12%, $green: 24%, $blue: 48% + ); +} + +<===> alpha_input/output.css +a { + b: color(display-p3 0.296 0.62 0.844 / 0.3); +} + +<===> +================================================================================ +<===> alpha_arg/input.scss +@use 'sass:color'; +a { + b: color.scale( + color(display-p3 0.2 0.5 0.7), + $red: 12%, $green: 24%, $blue: 48%, $alpha: -70% + ); +} + +<===> alpha_arg/output.css +a { + b: color(display-p3 0.296 0.62 0.844 / 0.3); +} + +<===> +================================================================================ +<===> named/input.scss +@use 'sass:color'; +a { + b: color.scale( + $color: color(display-p3 0.2 0.5 0.7), + $red: 12%, $green: 24%, $blue: 48% + ); +} + +<===> named/output.css +a { + b: color(display-p3 0.296 0.62 0.844); +} diff --git a/spec/core_functions/color/scale/error/units/a98_rgb.hrx b/spec/core_functions/color/scale/error/units/a98_rgb.hrx new file mode 100644 index 000000000..5fa1f11a7 --- /dev/null +++ b/spec/core_functions/color/scale/error/units/a98_rgb.hrx @@ -0,0 +1,81 @@ +<===> none/red/input.scss +@use 'sass:color'; +a {b: color.scale(color(a98-rgb 0.2 0.5 0.7), $red: 1)} + +<===> none/red/error +Error: $red: Expected 1 to have unit "%". + , +2 | a {b: color.scale(color(a98-rgb 0.2 0.5 0.7), $red: 1)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> none/green/input.scss +@use 'sass:color'; +a {b: color.scale(color(a98-rgb 0.2 0.5 0.7), $green: 1)} + +<===> none/green/error +Error: $green: Expected 1 to have unit "%". + , +2 | a {b: color.scale(color(a98-rgb 0.2 0.5 0.7), $green: 1)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> none/blue/input.scss +@use 'sass:color'; +a {b: color.scale(color(a98-rgb 0.2 0.5 0.7), $blue: 1)} + +<===> none/blue/error +Error: $blue: Expected 1 to have unit "%". + , +2 | a {b: color.scale(color(a98-rgb 0.2 0.5 0.7), $blue: 1)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> wrong/red/input.scss +@use 'sass:color'; +a {b: color.scale(color(a98-rgb 0.2 0.5 0.7), $red: 1px)} + +<===> wrong/red/error +Error: $red: Expected 1px to have unit "%". + , +2 | a {b: color.scale(color(a98-rgb 0.2 0.5 0.7), $red: 1px)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> wrong/green/input.scss +@use 'sass:color'; +a {b: color.scale(color(a98-rgb 0.2 0.5 0.7), $green: 1px)} + +<===> wrong/green/error +Error: $green: Expected 1px to have unit "%". + , +2 | a {b: color.scale(color(a98-rgb 0.2 0.5 0.7), $green: 1px)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> wrong/blue/input.scss +@use 'sass:color'; +a {b: color.scale(color(a98-rgb 0.2 0.5 0.7), $blue: 1px)} + +<===> wrong/blue/error +Error: $blue: Expected 1px to have unit "%". + , +2 | a {b: color.scale(color(a98-rgb 0.2 0.5 0.7), $blue: 1px)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet diff --git a/spec/core_functions/color/scale/error/units/display_p3.hrx b/spec/core_functions/color/scale/error/units/display_p3.hrx new file mode 100644 index 000000000..fb43ae196 --- /dev/null +++ b/spec/core_functions/color/scale/error/units/display_p3.hrx @@ -0,0 +1,81 @@ +<===> none/red/input.scss +@use 'sass:color'; +a {b: color.scale(color(display-p3 0.2 0.5 0.7), $red: 1)} + +<===> none/red/error +Error: $red: Expected 1 to have unit "%". + , +2 | a {b: color.scale(color(display-p3 0.2 0.5 0.7), $red: 1)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> none/green/input.scss +@use 'sass:color'; +a {b: color.scale(color(display-p3 0.2 0.5 0.7), $green: 1)} + +<===> none/green/error +Error: $green: Expected 1 to have unit "%". + , +2 | a {b: color.scale(color(display-p3 0.2 0.5 0.7), $green: 1)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> none/blue/input.scss +@use 'sass:color'; +a {b: color.scale(color(display-p3 0.2 0.5 0.7), $blue: 1)} + +<===> none/blue/error +Error: $blue: Expected 1 to have unit "%". + , +2 | a {b: color.scale(color(display-p3 0.2 0.5 0.7), $blue: 1)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> wrong/red/input.scss +@use 'sass:color'; +a {b: color.scale(color(display-p3 0.2 0.5 0.7), $red: 1px)} + +<===> wrong/red/error +Error: $red: Expected 1px to have unit "%". + , +2 | a {b: color.scale(color(display-p3 0.2 0.5 0.7), $red: 1px)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> wrong/green/input.scss +@use 'sass:color'; +a {b: color.scale(color(display-p3 0.2 0.5 0.7), $green: 1px)} + +<===> wrong/green/error +Error: $green: Expected 1px to have unit "%". + , +2 | a {b: color.scale(color(display-p3 0.2 0.5 0.7), $green: 1px)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> wrong/blue/input.scss +@use 'sass:color'; +a {b: color.scale(color(display-p3 0.2 0.5 0.7), $blue: 1px)} + +<===> wrong/blue/error +Error: $blue: Expected 1px to have unit "%". + , +2 | a {b: color.scale(color(display-p3 0.2 0.5 0.7), $blue: 1px)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet diff --git a/spec/core_functions/color/scale/error/units/lab.hrx b/spec/core_functions/color/scale/error/units/lab.hrx new file mode 100644 index 000000000..2d626e78c --- /dev/null +++ b/spec/core_functions/color/scale/error/units/lab.hrx @@ -0,0 +1,81 @@ +<===> none/lightness/input.scss +@use 'sass:color'; +a {b: color.scale(lab(50% 40% -20%), $lightness: 1)} + +<===> none/lightness/error +Error: $lightness: Expected 1 to have unit "%". + , +2 | a {b: color.scale(lab(50% 40% -20%), $lightness: 1)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> none/a/input.scss +@use 'sass:color'; +a {b: color.scale(lab(50% 40% -20%), $a: 1)} + +<===> none/a/error +Error: $a: Expected 1 to have unit "%". + , +2 | a {b: color.scale(lab(50% 40% -20%), $a: 1)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> none/b/input.scss +@use 'sass:color'; +a {b: color.scale(lab(50% 40% -20%), $b: 1)} + +<===> none/b/error +Error: $b: Expected 1 to have unit "%". + , +2 | a {b: color.scale(lab(50% 40% -20%), $b: 1)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> wrong/lightness/input.scss +@use 'sass:color'; +a {b: color.scale(lab(50% 40% -20%), $lightness: 1px)} + +<===> wrong/lightness/error +Error: $lightness: Expected 1px to have unit "%". + , +2 | a {b: color.scale(lab(50% 40% -20%), $lightness: 1px)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> wrong/a/input.scss +@use 'sass:color'; +a {b: color.scale(lab(50% 40% -20%), $a: 1px)} + +<===> wrong/a/error +Error: $a: Expected 1px to have unit "%". + , +2 | a {b: color.scale(lab(50% 40% -20%), $a: 1px)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> wrong/b/input.scss +@use 'sass:color'; +a {b: color.scale(lab(50% 40% -20%), $b: 1px)} + +<===> wrong/b/error +Error: $b: Expected 1px to have unit "%". + , +2 | a {b: color.scale(lab(50% 40% -20%), $b: 1px)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet diff --git a/spec/core_functions/color/scale/error/units/lch.hrx b/spec/core_functions/color/scale/error/units/lch.hrx new file mode 100644 index 000000000..14cd387d2 --- /dev/null +++ b/spec/core_functions/color/scale/error/units/lch.hrx @@ -0,0 +1,53 @@ +<===> none/lightness/input.scss +@use 'sass:color'; +a {b: color.scale(lch(30% 70% 200deg), $lightness: 1)} + +<===> none/lightness/error +Error: $lightness: Expected 1 to have unit "%". + , +2 | a {b: color.scale(lch(30% 70% 200deg), $lightness: 1)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> none/chroma/input.scss +@use 'sass:color'; +a {b: color.scale(lch(30% 70% 200deg), $chroma: 1)} + +<===> none/chroma/error +Error: $chroma: Expected 1 to have unit "%". + , +2 | a {b: color.scale(lch(30% 70% 200deg), $chroma: 1)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> wrong/lightness/input.scss +@use 'sass:color'; +a {b: color.scale(lch(30% 70% 200deg), $lightness: 1px)} + +<===> wrong/lightness/error +Error: $lightness: Expected 1px to have unit "%". + , +2 | a {b: color.scale(lch(30% 70% 200deg), $lightness: 1px)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> wrong/chroma/input.scss +@use 'sass:color'; +a {b: color.scale(lch(30% 70% 200deg), $chroma: 1px)} + +<===> wrong/chroma/error +Error: $chroma: Expected 1px to have unit "%". + , +2 | a {b: color.scale(lch(30% 70% 200deg), $chroma: 1px)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet diff --git a/spec/core_functions/color/scale/error/units/oklab.hrx b/spec/core_functions/color/scale/error/units/oklab.hrx new file mode 100644 index 000000000..298bf58df --- /dev/null +++ b/spec/core_functions/color/scale/error/units/oklab.hrx @@ -0,0 +1,81 @@ +<===> none/lightness/input.scss +@use 'sass:color'; +a {b: color.scale(oklab(50% 40% -20%), $lightness: 1)} + +<===> none/lightness/error +Error: $lightness: Expected 1 to have unit "%". + , +2 | a {b: color.scale(oklab(50% 40% -20%), $lightness: 1)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> none/a/input.scss +@use 'sass:color'; +a {b: color.scale(oklab(50% 40% -20%), $a: 1)} + +<===> none/a/error +Error: $a: Expected 1 to have unit "%". + , +2 | a {b: color.scale(oklab(50% 40% -20%), $a: 1)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> none/b/input.scss +@use 'sass:color'; +a {b: color.scale(oklab(50% 40% -20%), $b: 1)} + +<===> none/b/error +Error: $b: Expected 1 to have unit "%". + , +2 | a {b: color.scale(oklab(50% 40% -20%), $b: 1)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> wrong/lightness/input.scss +@use 'sass:color'; +a {b: color.scale(oklab(50% 40% -20%), $lightness: 1px)} + +<===> wrong/lightness/error +Error: $lightness: Expected 1px to have unit "%". + , +2 | a {b: color.scale(oklab(50% 40% -20%), $lightness: 1px)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> wrong/a/input.scss +@use 'sass:color'; +a {b: color.scale(oklab(50% 40% -20%), $a: 1px)} + +<===> wrong/a/error +Error: $a: Expected 1px to have unit "%". + , +2 | a {b: color.scale(oklab(50% 40% -20%), $a: 1px)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> wrong/b/input.scss +@use 'sass:color'; +a {b: color.scale(oklab(50% 40% -20%), $b: 1px)} + +<===> wrong/b/error +Error: $b: Expected 1px to have unit "%". + , +2 | a {b: color.scale(oklab(50% 40% -20%), $b: 1px)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet diff --git a/spec/core_functions/color/scale/error/units/oklch.hrx b/spec/core_functions/color/scale/error/units/oklch.hrx new file mode 100644 index 000000000..14cd387d2 --- /dev/null +++ b/spec/core_functions/color/scale/error/units/oklch.hrx @@ -0,0 +1,53 @@ +<===> none/lightness/input.scss +@use 'sass:color'; +a {b: color.scale(lch(30% 70% 200deg), $lightness: 1)} + +<===> none/lightness/error +Error: $lightness: Expected 1 to have unit "%". + , +2 | a {b: color.scale(lch(30% 70% 200deg), $lightness: 1)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> none/chroma/input.scss +@use 'sass:color'; +a {b: color.scale(lch(30% 70% 200deg), $chroma: 1)} + +<===> none/chroma/error +Error: $chroma: Expected 1 to have unit "%". + , +2 | a {b: color.scale(lch(30% 70% 200deg), $chroma: 1)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> wrong/lightness/input.scss +@use 'sass:color'; +a {b: color.scale(lch(30% 70% 200deg), $lightness: 1px)} + +<===> wrong/lightness/error +Error: $lightness: Expected 1px to have unit "%". + , +2 | a {b: color.scale(lch(30% 70% 200deg), $lightness: 1px)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> wrong/chroma/input.scss +@use 'sass:color'; +a {b: color.scale(lch(30% 70% 200deg), $chroma: 1px)} + +<===> wrong/chroma/error +Error: $chroma: Expected 1px to have unit "%". + , +2 | a {b: color.scale(lch(30% 70% 200deg), $chroma: 1px)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet diff --git a/spec/core_functions/color/scale/error/units/prophoto_rgb.hrx b/spec/core_functions/color/scale/error/units/prophoto_rgb.hrx new file mode 100644 index 000000000..0cabe6f1d --- /dev/null +++ b/spec/core_functions/color/scale/error/units/prophoto_rgb.hrx @@ -0,0 +1,81 @@ +<===> none/red/input.scss +@use 'sass:color'; +a {b: color.scale(color(prophoto-rgb 0.2 0.5 0.7), $red: 1)} + +<===> none/red/error +Error: $red: Expected 1 to have unit "%". + , +2 | a {b: color.scale(color(prophoto-rgb 0.2 0.5 0.7), $red: 1)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> none/green/input.scss +@use 'sass:color'; +a {b: color.scale(color(prophoto-rgb 0.2 0.5 0.7), $green: 1)} + +<===> none/green/error +Error: $green: Expected 1 to have unit "%". + , +2 | a {b: color.scale(color(prophoto-rgb 0.2 0.5 0.7), $green: 1)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> none/blue/input.scss +@use 'sass:color'; +a {b: color.scale(color(prophoto-rgb 0.2 0.5 0.7), $blue: 1)} + +<===> none/blue/error +Error: $blue: Expected 1 to have unit "%". + , +2 | a {b: color.scale(color(prophoto-rgb 0.2 0.5 0.7), $blue: 1)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> wrong/red/input.scss +@use 'sass:color'; +a {b: color.scale(color(prophoto-rgb 0.2 0.5 0.7), $red: 1px)} + +<===> wrong/red/error +Error: $red: Expected 1px to have unit "%". + , +2 | a {b: color.scale(color(prophoto-rgb 0.2 0.5 0.7), $red: 1px)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> wrong/green/input.scss +@use 'sass:color'; +a {b: color.scale(color(prophoto-rgb 0.2 0.5 0.7), $green: 1px)} + +<===> wrong/green/error +Error: $green: Expected 1px to have unit "%". + , +2 | a {b: color.scale(color(prophoto-rgb 0.2 0.5 0.7), $green: 1px)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> wrong/blue/input.scss +@use 'sass:color'; +a {b: color.scale(color(prophoto-rgb 0.2 0.5 0.7), $blue: 1px)} + +<===> wrong/blue/error +Error: $blue: Expected 1px to have unit "%". + , +2 | a {b: color.scale(color(prophoto-rgb 0.2 0.5 0.7), $blue: 1px)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet diff --git a/spec/core_functions/color/scale/error/units/rec2020.hrx b/spec/core_functions/color/scale/error/units/rec2020.hrx new file mode 100644 index 000000000..ff2a9c135 --- /dev/null +++ b/spec/core_functions/color/scale/error/units/rec2020.hrx @@ -0,0 +1,81 @@ +<===> none/red/input.scss +@use 'sass:color'; +a {b: color.scale(color(rec2020 0.2 0.5 0.7), $red: 1)} + +<===> none/red/error +Error: $red: Expected 1 to have unit "%". + , +2 | a {b: color.scale(color(rec2020 0.2 0.5 0.7), $red: 1)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> none/green/input.scss +@use 'sass:color'; +a {b: color.scale(color(rec2020 0.2 0.5 0.7), $green: 1)} + +<===> none/green/error +Error: $green: Expected 1 to have unit "%". + , +2 | a {b: color.scale(color(rec2020 0.2 0.5 0.7), $green: 1)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> none/blue/input.scss +@use 'sass:color'; +a {b: color.scale(color(rec2020 0.2 0.5 0.7), $blue: 1)} + +<===> none/blue/error +Error: $blue: Expected 1 to have unit "%". + , +2 | a {b: color.scale(color(rec2020 0.2 0.5 0.7), $blue: 1)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> wrong/red/input.scss +@use 'sass:color'; +a {b: color.scale(color(rec2020 0.2 0.5 0.7), $red: 1px)} + +<===> wrong/red/error +Error: $red: Expected 1px to have unit "%". + , +2 | a {b: color.scale(color(rec2020 0.2 0.5 0.7), $red: 1px)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> wrong/green/input.scss +@use 'sass:color'; +a {b: color.scale(color(rec2020 0.2 0.5 0.7), $green: 1px)} + +<===> wrong/green/error +Error: $green: Expected 1px to have unit "%". + , +2 | a {b: color.scale(color(rec2020 0.2 0.5 0.7), $green: 1px)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> wrong/blue/input.scss +@use 'sass:color'; +a {b: color.scale(color(rec2020 0.2 0.5 0.7), $blue: 1px)} + +<===> wrong/blue/error +Error: $blue: Expected 1px to have unit "%". + , +2 | a {b: color.scale(color(rec2020 0.2 0.5 0.7), $blue: 1px)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet diff --git a/spec/core_functions/color/scale/error/units/srgb.hrx b/spec/core_functions/color/scale/error/units/srgb.hrx new file mode 100644 index 000000000..818bbed16 --- /dev/null +++ b/spec/core_functions/color/scale/error/units/srgb.hrx @@ -0,0 +1,81 @@ +<===> none/red/input.scss +@use 'sass:color'; +a {b: color.scale(color(srgb 0.2 0.5 0.7), $red: 1)} + +<===> none/red/error +Error: $red: Expected 1 to have unit "%". + , +2 | a {b: color.scale(color(srgb 0.2 0.5 0.7), $red: 1)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> none/green/input.scss +@use 'sass:color'; +a {b: color.scale(color(srgb 0.2 0.5 0.7), $green: 1)} + +<===> none/green/error +Error: $green: Expected 1 to have unit "%". + , +2 | a {b: color.scale(color(srgb 0.2 0.5 0.7), $green: 1)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> none/blue/input.scss +@use 'sass:color'; +a {b: color.scale(color(srgb 0.2 0.5 0.7), $blue: 1)} + +<===> none/blue/error +Error: $blue: Expected 1 to have unit "%". + , +2 | a {b: color.scale(color(srgb 0.2 0.5 0.7), $blue: 1)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> wrong/red/input.scss +@use 'sass:color'; +a {b: color.scale(color(srgb 0.2 0.5 0.7), $red: 1px)} + +<===> wrong/red/error +Error: $red: Expected 1px to have unit "%". + , +2 | a {b: color.scale(color(srgb 0.2 0.5 0.7), $red: 1px)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> wrong/green/input.scss +@use 'sass:color'; +a {b: color.scale(color(srgb 0.2 0.5 0.7), $green: 1px)} + +<===> wrong/green/error +Error: $green: Expected 1px to have unit "%". + , +2 | a {b: color.scale(color(srgb 0.2 0.5 0.7), $green: 1px)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> wrong/blue/input.scss +@use 'sass:color'; +a {b: color.scale(color(srgb 0.2 0.5 0.7), $blue: 1px)} + +<===> wrong/blue/error +Error: $blue: Expected 1px to have unit "%". + , +2 | a {b: color.scale(color(srgb 0.2 0.5 0.7), $blue: 1px)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet diff --git a/spec/core_functions/color/scale/error/units/srgb_linear.hrx b/spec/core_functions/color/scale/error/units/srgb_linear.hrx new file mode 100644 index 000000000..dfda62e1e --- /dev/null +++ b/spec/core_functions/color/scale/error/units/srgb_linear.hrx @@ -0,0 +1,81 @@ +<===> none/red/input.scss +@use 'sass:color'; +a {b: color.scale(color(srgb-linear 0.2 0.5 0.7), $red: 1)} + +<===> none/red/error +Error: $red: Expected 1 to have unit "%". + , +2 | a {b: color.scale(color(srgb-linear 0.2 0.5 0.7), $red: 1)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> none/green/input.scss +@use 'sass:color'; +a {b: color.scale(color(srgb-linear 0.2 0.5 0.7), $green: 1)} + +<===> none/green/error +Error: $green: Expected 1 to have unit "%". + , +2 | a {b: color.scale(color(srgb-linear 0.2 0.5 0.7), $green: 1)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> none/blue/input.scss +@use 'sass:color'; +a {b: color.scale(color(srgb-linear 0.2 0.5 0.7), $blue: 1)} + +<===> none/blue/error +Error: $blue: Expected 1 to have unit "%". + , +2 | a {b: color.scale(color(srgb-linear 0.2 0.5 0.7), $blue: 1)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> wrong/red/input.scss +@use 'sass:color'; +a {b: color.scale(color(srgb-linear 0.2 0.5 0.7), $red: 1px)} + +<===> wrong/red/error +Error: $red: Expected 1px to have unit "%". + , +2 | a {b: color.scale(color(srgb-linear 0.2 0.5 0.7), $red: 1px)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> wrong/green/input.scss +@use 'sass:color'; +a {b: color.scale(color(srgb-linear 0.2 0.5 0.7), $green: 1px)} + +<===> wrong/green/error +Error: $green: Expected 1px to have unit "%". + , +2 | a {b: color.scale(color(srgb-linear 0.2 0.5 0.7), $green: 1px)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> wrong/blue/input.scss +@use 'sass:color'; +a {b: color.scale(color(srgb-linear 0.2 0.5 0.7), $blue: 1px)} + +<===> wrong/blue/error +Error: $blue: Expected 1px to have unit "%". + , +2 | a {b: color.scale(color(srgb-linear 0.2 0.5 0.7), $blue: 1px)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet diff --git a/spec/core_functions/color/scale/error/units/xyz_d50.hrx b/spec/core_functions/color/scale/error/units/xyz_d50.hrx new file mode 100644 index 000000000..38f0ca35f --- /dev/null +++ b/spec/core_functions/color/scale/error/units/xyz_d50.hrx @@ -0,0 +1,81 @@ +<===> none/x/input.scss +@use 'sass:color'; +a {b: color.scale(color(xyz-d50 0.2 0.5 0.7), $x: 1)} + +<===> none/x/error +Error: $x: Expected 1 to have unit "%". + , +2 | a {b: color.scale(color(xyz-d50 0.2 0.5 0.7), $x: 1)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> none/y/input.scss +@use 'sass:color'; +a {b: color.scale(color(xyz-d50 0.2 0.5 0.7), $y: 1)} + +<===> none/y/error +Error: $y: Expected 1 to have unit "%". + , +2 | a {b: color.scale(color(xyz-d50 0.2 0.5 0.7), $y: 1)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> none/z/input.scss +@use 'sass:color'; +a {b: color.scale(color(xyz-d50 0.2 0.5 0.7), $z: 1)} + +<===> none/z/error +Error: $z: Expected 1 to have unit "%". + , +2 | a {b: color.scale(color(xyz-d50 0.2 0.5 0.7), $z: 1)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> wrong/x/input.scss +@use 'sass:color'; +a {b: color.scale(color(xyz-d50 0.2 0.5 0.7), $x: 1px)} + +<===> wrong/x/error +Error: $x: Expected 1px to have unit "%". + , +2 | a {b: color.scale(color(xyz-d50 0.2 0.5 0.7), $x: 1px)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> wrong/y/input.scss +@use 'sass:color'; +a {b: color.scale(color(xyz-d50 0.2 0.5 0.7), $y: 1px)} + +<===> wrong/y/error +Error: $y: Expected 1px to have unit "%". + , +2 | a {b: color.scale(color(xyz-d50 0.2 0.5 0.7), $y: 1px)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> wrong/z/input.scss +@use 'sass:color'; +a {b: color.scale(color(xyz-d50 0.2 0.5 0.7), $z: 1px)} + +<===> wrong/z/error +Error: $z: Expected 1px to have unit "%". + , +2 | a {b: color.scale(color(xyz-d50 0.2 0.5 0.7), $z: 1px)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet diff --git a/spec/core_functions/color/scale/error/units/xyz_d65.hrx b/spec/core_functions/color/scale/error/units/xyz_d65.hrx new file mode 100644 index 000000000..640ea963d --- /dev/null +++ b/spec/core_functions/color/scale/error/units/xyz_d65.hrx @@ -0,0 +1,81 @@ +<===> none/x/input.scss +@use 'sass:color'; +a {b: color.scale(color(xyz-d65 0.2 0.5 0.7), $x: 1)} + +<===> none/x/error +Error: $x: Expected 1 to have unit "%". + , +2 | a {b: color.scale(color(xyz-d65 0.2 0.5 0.7), $x: 1)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> none/y/input.scss +@use 'sass:color'; +a {b: color.scale(color(xyz-d65 0.2 0.5 0.7), $y: 1)} + +<===> none/y/error +Error: $y: Expected 1 to have unit "%". + , +2 | a {b: color.scale(color(xyz-d65 0.2 0.5 0.7), $y: 1)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> none/z/input.scss +@use 'sass:color'; +a {b: color.scale(color(xyz-d65 0.2 0.5 0.7), $z: 1)} + +<===> none/z/error +Error: $z: Expected 1 to have unit "%". + , +2 | a {b: color.scale(color(xyz-d65 0.2 0.5 0.7), $z: 1)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> wrong/x/input.scss +@use 'sass:color'; +a {b: color.scale(color(xyz-d65 0.2 0.5 0.7), $x: 1px)} + +<===> wrong/x/error +Error: $x: Expected 1px to have unit "%". + , +2 | a {b: color.scale(color(xyz-d65 0.2 0.5 0.7), $x: 1px)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> wrong/y/input.scss +@use 'sass:color'; +a {b: color.scale(color(xyz-d65 0.2 0.5 0.7), $y: 1px)} + +<===> wrong/y/error +Error: $y: Expected 1px to have unit "%". + , +2 | a {b: color.scale(color(xyz-d65 0.2 0.5 0.7), $y: 1px)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> wrong/z/input.scss +@use 'sass:color'; +a {b: color.scale(color(xyz-d65 0.2 0.5 0.7), $z: 1px)} + +<===> wrong/z/error +Error: $z: Expected 1px to have unit "%". + , +2 | a {b: color.scale(color(xyz-d65 0.2 0.5 0.7), $z: 1px)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet diff --git a/spec/core_functions/color/scale/lab.hrx b/spec/core_functions/color/scale/lab.hrx new file mode 100644 index 000000000..68c46da23 --- /dev/null +++ b/spec/core_functions/color/scale/lab.hrx @@ -0,0 +1,217 @@ +<===> lightness/max/input.scss +@use 'sass:color'; +a {b: color.scale(lab(70% 100 -60), $lightness: 100%)} + +<===> lightness/max/output.css +a { + b: lab(100% 100 -60); +} + +<===> +================================================================================ +<===> lightness/min/input.scss +@use 'sass:color'; +a {b: color.scale(lab(70% 100 -60), $lightness: -100%)} + +<===> lightness/min/output.css +a { + b: lab(0% 100 -60); +} + +<===> +================================================================================ +<===> lightness/zero/input.scss +@use 'sass:color'; +a {b: color.scale(lab(70% 100 -60), $lightness: 0%)} + +<===> lightness/zero/output.css +a { + b: lab(70% 100 -60); +} + +<===> +================================================================================ +<===> lightness/low/input.scss +@use 'sass:color'; +a {b: color.scale(lab(70% 100 -60), $lightness: -33%)} + +<===> lightness/low/output.css +a { + b: lab(46.9% 100 -60); +} + +<===> +================================================================================ +<===> lightness/high/input.scss +@use 'sass:color'; +a {b: color.scale(lab(70% 100 -60), $lightness: 86%)} + +<===> lightness/high/output.css +a { + b: lab(95.8% 100 -60); +} + +<===> +================================================================================ +<===> a/max/input.scss +@use 'sass:color'; +a {b: color.scale(lab(70% 100 -60), $a: 100%)} + +<===> a/max/output.css +a { + b: lab(70% 125 -60); +} + +<===> +================================================================================ +<===> a/min/input.scss +@use 'sass:color'; +a {b: color.scale(lab(70% 100 -60), $a: -100%)} + +<===> a/min/output.css +a { + b: lab(70% -125 -60); +} + +<===> +================================================================================ +<===> a/zero/input.scss +@use 'sass:color'; +a {b: color.scale(lab(70% 100 -60), $a: 0%)} + +<===> a/zero/output.css +a { + b: lab(70% 100 -60); +} + +<===> +================================================================================ +<===> a/low/input.scss +@use 'sass:color'; +a {b: color.scale(lab(70% 100 -60), $a: -86%)} + +<===> a/low/output.css +a { + b: lab(70% -93.5 -60); +} + +<===> +================================================================================ +<===> a/high/input.scss +@use 'sass:color'; +a {b: color.scale(lab(70% 100 -60), $a: 12%)} + +<===> a/high/output.css +a { + b: lab(70% 103 -60); +} + +<===> +================================================================================ +<===> b/max/input.scss +@use 'sass:color'; +a {b: color.scale(lab(70% 100 -60), $b: 100%)} + +<===> b/max/output.css +a { + b: lab(70% 100 125); +} + +<===> +================================================================================ +<===> b/min/input.scss +@use 'sass:color'; +a {b: color.scale(lab(70% 100 -60), $b: -100%)} + +<===> b/min/output.css +a { + b: lab(70% 100 -125); +} + +<===> +================================================================================ +<===> b/zero/input.scss +@use 'sass:color'; +a {b: color.scale(lab(70% 100 -60), $b: 0%)} + +<===> b/zero/output.css +a { + b: lab(70% 100 -60); +} + +<===> +================================================================================ +<===> b/low/input.scss +@use 'sass:color'; +a {b: color.scale(lab(70% 100 -60), $b: -16%)} + +<===> b/low/output.css +a { + b: lab(70% 100 -70.4); +} + +<===> +================================================================================ +<===> b/high/input.scss +@use 'sass:color'; +a {b: color.scale(lab(70% 100 -60), $b: 42%)} + +<===> b/high/output.css +a { + b: lab(70% 100 17.7); +} + +<===> +================================================================================ +<===> all/input.scss +@use 'sass:color'; +a { + b: color.scale(lab(70% 100 -60), $lightness: 12%, $a: 24%, $b: 48%); +} + +<===> all/output.css +a { + b: lab(73.6% 106 28.8); +} + +<===> +================================================================================ +<===> alpha_input/input.scss +@use 'sass:color'; +a { + b: color.scale(lab(70% 100 -60 / 0.3), $lightness: 12%, $a: 24%, $b: 48%); +} + +<===> alpha_input/output.css +a { + b: lab(73.6% 106 28.8 / 0.3); +} + +<===> +================================================================================ +<===> alpha_arg/input.scss +@use 'sass:color'; +a { + b: color.scale( + lab(70% 100 -60), + $lightness: 12%, $a: 24%, $b: 48%, $alpha: -70% + ); +} + +<===> alpha_arg/output.css +a { + b: lab(73.6% 106 28.8 / 0.3); +} + +<===> +================================================================================ +<===> named/input.scss +@use 'sass:color'; +a { + b: color.scale($color: lab(70% 100 -60), $lightness: 12%, $a: 24%, $b: 48%); +} + +<===> named/output.css +a { + b: lab(73.6% 106 28.8); +} diff --git a/spec/core_functions/color/scale/lch.hrx b/spec/core_functions/color/scale/lch.hrx new file mode 100644 index 000000000..a0a520405 --- /dev/null +++ b/spec/core_functions/color/scale/lch.hrx @@ -0,0 +1,158 @@ +<===> lightness/max/input.scss +@use 'sass:color'; +a {b: color.scale(lch(70% 20% 80deg), $lightness: 100%)} + +<===> lightness/max/output.css +a { + b: lch(100% 30 80deg); +} + +<===> +================================================================================ +<===> lightness/min/input.scss +@use 'sass:color'; +a {b: color.scale(lch(70% 20% 80deg), $lightness: -100%)} + +<===> lightness/min/output.css +a { + b: lch(0% 30 80deg); +} + +<===> +================================================================================ +<===> lightness/zero/input.scss +@use 'sass:color'; +a {b: color.scale(lch(70% 20% 80deg), $lightness: 0%)} + +<===> lightness/zero/output.css +a { + b: lch(70% 30 80deg); +} + +<===> +================================================================================ +<===> lightness/low/input.scss +@use 'sass:color'; +a {b: color.scale(lch(70% 20% 80deg), $lightness: -33%)} + +<===> lightness/low/output.css +a { + b: lch(46.9% 30 80deg); +} + +<===> +================================================================================ +<===> lightness/high/input.scss +@use 'sass:color'; +a {b: color.scale(lch(70% 20% 80deg), $lightness: 86%)} + +<===> lightness/high/output.css +a { + b: lch(95.8% 30 80deg); +} + +<===> +================================================================================ +<===> chroma/max/input.scss +@use 'sass:color'; +a {b: color.scale(lch(70% 20% 80deg), $chroma: 100%)} + +<===> chroma/max/output.css +a { + b: lch(70% 150 80deg); +} + +<===> +================================================================================ +<===> chroma/min/input.scss +@use 'sass:color'; +a {b: color.scale(lch(70% 20% 80deg), $chroma: -100%)} + +<===> chroma/min/output.css +a { + b: lch(70% 0 80deg); +} + +<===> +================================================================================ +<===> chroma/zero/input.scss +@use 'sass:color'; +a {b: color.scale(lch(70% 20% 80deg), $chroma: 0%)} + +<===> chroma/zero/output.css +a { + b: lch(70% 30 80deg); +} + +<===> +================================================================================ +<===> chroma/low/input.scss +@use 'sass:color'; +a {b: color.scale(lch(70% 20% 80deg), $chroma: -86%)} + +<===> chroma/low/output.css +a { + b: lch(70% 4.2 80deg); +} + +<===> +================================================================================ +<===> chroma/high/input.scss +@use 'sass:color'; +a {b: color.scale(lch(70% 20% 80deg), $chroma: 12%)} + +<===> chroma/high/output.css +a { + b: lch(70% 44.4 80deg); +} + +<===> +================================================================================ +<===> all/input.scss +@use 'sass:color'; +a {b: color.scale(lch(70% 20% 80deg), $lightness: 12%, $chroma: 24%)} + +<===> all/output.css +a { + b: lch(73.6% 58.8 80deg); +} + +<===> +================================================================================ +<===> alpha_input/input.scss +@use 'sass:color'; +a { + b: color.scale(lch(70% 20% 80deg / 0.3), $lightness: 12%, $chroma: 24%); +} + +<===> alpha_input/output.css +a { + b: lch(73.6% 58.8 80deg / 0.3); +} + +<===> +================================================================================ +<===> alpha_arg/input.scss +@use 'sass:color'; +a { + b: color.scale( + lch(70% 20% 80deg), + $lightness: 12%, $chroma: 24%, $alpha: -70% + ); +} + +<===> alpha_arg/output.css +a { + b: lch(73.6% 58.8 80deg / 0.3); +} + +<===> +================================================================================ +<===> named/input.scss +@use 'sass:color'; +a {b: color.scale($color: lch(70% 20% 80deg), $lightness: 12%, $chroma: 24%)} + +<===> named/output.css +a { + b: lch(73.6% 58.8 80deg); +} diff --git a/spec/core_functions/color/scale/oklab.hrx b/spec/core_functions/color/scale/oklab.hrx new file mode 100644 index 000000000..2f511ee2d --- /dev/null +++ b/spec/core_functions/color/scale/oklab.hrx @@ -0,0 +1,217 @@ +<===> lightness/max/input.scss +@use 'sass:color'; +a {b: color.scale(oklab(70% 0.3 -0.25), $lightness: 100%)} + +<===> lightness/max/output.css +a { + b: oklab(100% 0.3 -0.25); +} + +<===> +================================================================================ +<===> lightness/min/input.scss +@use 'sass:color'; +a {b: color.scale(oklab(70% 0.3 -0.25), $lightness: -100%)} + +<===> lightness/min/output.css +a { + b: oklab(0% 0.3 -0.25); +} + +<===> +================================================================================ +<===> lightness/zero/input.scss +@use 'sass:color'; +a {b: color.scale(oklab(70% 0.3 -0.25), $lightness: 0%)} + +<===> lightness/zero/output.css +a { + b: oklab(70% 0.3 -0.25); +} + +<===> +================================================================================ +<===> lightness/low/input.scss +@use 'sass:color'; +a {b: color.scale(oklab(70% 0.3 -0.25), $lightness: -33%)} + +<===> lightness/low/output.css +a { + b: oklab(46.9% 0.3 -0.25); +} + +<===> +================================================================================ +<===> lightness/high/input.scss +@use 'sass:color'; +a {b: color.scale(oklab(70% 0.3 -0.25), $lightness: 86%)} + +<===> lightness/high/output.css +a { + b: oklab(95.8% 0.3 -0.25); +} + +<===> +================================================================================ +<===> a/max/input.scss +@use 'sass:color'; +a {b: color.scale(oklab(70% 0.3 -0.25), $a: 100%)} + +<===> a/max/output.css +a { + b: oklab(70% 0.4 -0.25); +} + +<===> +================================================================================ +<===> a/min/input.scss +@use 'sass:color'; +a {b: color.scale(oklab(70% 0.3 -0.25), $a: -100%)} + +<===> a/min/output.css +a { + b: oklab(70% -0.4 -0.25); +} + +<===> +================================================================================ +<===> a/zero/input.scss +@use 'sass:color'; +a {b: color.scale(oklab(70% 0.3 -0.25), $a: 0%)} + +<===> a/zero/output.css +a { + b: oklab(70% 0.3 -0.25); +} + +<===> +================================================================================ +<===> a/low/input.scss +@use 'sass:color'; +a {b: color.scale(oklab(70% 0.3 -0.25), $a: -86%)} + +<===> a/low/output.css +a { + b: oklab(70% -0.302 -0.25); +} + +<===> +================================================================================ +<===> a/high/input.scss +@use 'sass:color'; +a {b: color.scale(oklab(70% 0.3 -0.25), $a: 12%)} + +<===> a/high/output.css +a { + b: oklab(70% 0.312 -0.25); +} + +<===> +================================================================================ +<===> b/max/input.scss +@use 'sass:color'; +a {b: color.scale(oklab(70% 0.3 -0.25), $b: 100%)} + +<===> b/max/output.css +a { + b: oklab(70% 0.3 0.4); +} + +<===> +================================================================================ +<===> b/min/input.scss +@use 'sass:color'; +a {b: color.scale(oklab(70% 0.3 -0.25), $b: -100%)} + +<===> b/min/output.css +a { + b: oklab(70% 0.3 -0.4); +} + +<===> +================================================================================ +<===> b/zero/input.scss +@use 'sass:color'; +a {b: color.scale(oklab(70% 0.3 -0.25), $b: 0%)} + +<===> b/zero/output.css +a { + b: oklab(70% 0.3 -0.25); +} + +<===> +================================================================================ +<===> b/low/input.scss +@use 'sass:color'; +a {b: color.scale(oklab(70% 0.3 -0.25), $b: -16%)} + +<===> b/low/output.css +a { + b: oklab(70% 0.3 -0.274); +} + +<===> +================================================================================ +<===> b/high/input.scss +@use 'sass:color'; +a {b: color.scale(oklab(70% 0.3 -0.25), $b: 42%)} + +<===> b/high/output.css +a { + b: oklab(70% 0.3 0.023); +} + +<===> +================================================================================ +<===> all/input.scss +@use 'sass:color'; +a { + b: color.scale(oklab(70% 0.3 -0.25), $lightness: 12%, $a: 24%, $b: 48%); +} + +<===> all/output.css +a { + b: oklab(73.6% 0.324 0.062); +} + +<===> +================================================================================ +<===> alpha_input/input.scss +@use 'sass:color'; +a { + b: color.scale(oklab(70% 0.3 -0.25 / 0.3), $lightness: 12%, $a: 24%, $b: 48%); +} + +<===> alpha_input/output.css +a { + b: oklab(73.6% 0.324 0.062 / 0.3); +} + +<===> +================================================================================ +<===> alpha_arg/input.scss +@use 'sass:color'; +a { + b: color.scale( + oklab(70% 0.3 -0.25), + $lightness: 12%, $a: 24%, $b: 48%, $alpha: -70% + ); +} + +<===> alpha_arg/output.css +a { + b: oklab(73.6% 0.324 0.062 / 0.3); +} + +<===> +================================================================================ +<===> named/input.scss +@use 'sass:color'; +a { + b: color.scale($color: oklab(70% 0.3 -0.25), $lightness: 12%, $a: 24%, $b: 48%); +} + +<===> named/output.css +a { + b: oklab(73.6% 0.324 0.062); +} diff --git a/spec/core_functions/color/scale/out_of_gamut.hrx b/spec/core_functions/color/scale/out_of_gamut.hrx new file mode 100644 index 000000000..364114343 --- /dev/null +++ b/spec/core_functions/color/scale/out_of_gamut.hrx @@ -0,0 +1,41 @@ +<===> above_gamut/up/input.scss +@use 'sass:color'; +a {b: color.scale(color(srgb 1.2 0.5 0.7), $red: 10%)} + +<===> above_gamut/up/output.css +a { + b: color(srgb 1.2 0.5 0.7); +} + +<===> +================================================================================ +<===> above_gamut/down/input.scss +@use 'sass:color'; +a {b: color.scale(color(srgb 1.2 0.5 0.7), $red: -10%)} + +<===> above_gamut/down/output.css +a { + b: color(srgb 1.08 0.5 0.7); +} + +<===> +================================================================================ +<===> below_gamut/up/input.scss +@use 'sass:color'; +a {b: color.scale(color(srgb -0.5 0.5 0.7), $red: 10%)} + +<===> below_gamut/up/output.css +a { + b: color(srgb -0.35 0.5 0.7); +} + +<===> +================================================================================ +<===> below_gamut/down/input.scss +@use 'sass:color'; +a {b: color.scale(color(srgb -0.5 0.5 0.7), $red: -10%)} + +<===> below_gamut/down/output.css +a { + b: color(srgb -0.5 0.5 0.7); +} diff --git a/spec/core_functions/color/scale/prophoto_rgb.hrx b/spec/core_functions/color/scale/prophoto_rgb.hrx new file mode 100644 index 000000000..a00ddfc6c --- /dev/null +++ b/spec/core_functions/color/scale/prophoto_rgb.hrx @@ -0,0 +1,225 @@ +<===> red/max/input.scss +@use 'sass:color'; +a {b: color.scale(color(prophoto-rgb 0.2 0.5 0.7), $red: 100%)} + +<===> red/max/output.css +a { + b: color(prophoto-rgb 1 0.5 0.7); +} + +<===> +================================================================================ +<===> red/min/input.scss +@use 'sass:color'; +a {b: color.scale(color(prophoto-rgb 0.2 0.5 0.7), $red: -100%)} + +<===> red/min/output.css +a { + b: color(prophoto-rgb 0 0.5 0.7); +} + +<===> +================================================================================ +<===> red/zero/input.scss +@use 'sass:color'; +a {b: color.scale(color(prophoto-rgb 0.2 0.5 0.7), $red: 0%)} + +<===> red/zero/output.css +a { + b: color(prophoto-rgb 0.2 0.5 0.7); +} + +<===> +================================================================================ +<===> red/low/input.scss +@use 'sass:color'; +a {b: color.scale(color(prophoto-rgb 0.2 0.5 0.7), $red: -33%)} + +<===> red/low/output.css +a { + b: color(prophoto-rgb 0.134 0.5 0.7); +} + +<===> +================================================================================ +<===> red/high/input.scss +@use 'sass:color'; +a {b: color.scale(color(prophoto-rgb 0.2 0.5 0.7), $red: 86%)} + +<===> red/high/output.css +a { + b: color(prophoto-rgb 0.888 0.5 0.7); +} + +<===> +================================================================================ +<===> green/max/input.scss +@use 'sass:color'; +a {b: color.scale(color(prophoto-rgb 0.2 0.5 0.7), $green: 100%)} + +<===> green/max/output.css +a { + b: color(prophoto-rgb 0.2 1 0.7); +} + +<===> +================================================================================ +<===> green/min/input.scss +@use 'sass:color'; +a {b: color.scale(color(prophoto-rgb 0.2 0.5 0.7), $green: -100%)} + +<===> green/min/output.css +a { + b: color(prophoto-rgb 0.2 0 0.7); +} + +<===> +================================================================================ +<===> green/zero/input.scss +@use 'sass:color'; +a {b: color.scale(color(prophoto-rgb 0.2 0.5 0.7), $green: 0%)} + +<===> green/zero/output.css +a { + b: color(prophoto-rgb 0.2 0.5 0.7); +} + +<===> +================================================================================ +<===> green/low/input.scss +@use 'sass:color'; +a {b: color.scale(color(prophoto-rgb 0.2 0.5 0.7), $green: -86%)} + +<===> green/low/output.css +a { + b: color(prophoto-rgb 0.2 0.07 0.7); +} + +<===> +================================================================================ +<===> green/high/input.scss +@use 'sass:color'; +a {b: color.scale(color(prophoto-rgb 0.2 0.5 0.7), $green: 12%)} + +<===> green/high/output.css +a { + b: color(prophoto-rgb 0.2 0.56 0.7); +} + +<===> +================================================================================ +<===> blue/max/input.scss +@use 'sass:color'; +a {b: color.scale(color(prophoto-rgb 0.2 0.5 0.7), $blue: 100%)} + +<===> blue/max/output.css +a { + b: color(prophoto-rgb 0.2 0.5 1); +} + +<===> +================================================================================ +<===> blue/min/input.scss +@use 'sass:color'; +a {b: color.scale(color(prophoto-rgb 0.2 0.5 0.7), $blue: -100%)} + +<===> blue/min/output.css +a { + b: color(prophoto-rgb 0.2 0.5 0); +} + +<===> +================================================================================ +<===> blue/zero/input.scss +@use 'sass:color'; +a {b: color.scale(color(prophoto-rgb 0.2 0.5 0.7), $blue: 0%)} + +<===> blue/zero/output.css +a { + b: color(prophoto-rgb 0.2 0.5 0.7); +} + +<===> +================================================================================ +<===> blue/low/input.scss +@use 'sass:color'; +a {b: color.scale(color(prophoto-rgb 0.2 0.5 0.7), $blue: -16%)} + +<===> blue/low/output.css +a { + b: color(prophoto-rgb 0.2 0.5 0.588); +} + +<===> +================================================================================ +<===> blue/high/input.scss +@use 'sass:color'; +a {b: color.scale(color(prophoto-rgb 0.2 0.5 0.7), $blue: 42%)} + +<===> blue/high/output.css +a { + b: color(prophoto-rgb 0.2 0.5 0.826); +} + +<===> +================================================================================ +<===> all/input.scss +@use 'sass:color'; +a { + b: color.scale( + color(prophoto-rgb 0.2 0.5 0.7), $red: 12%, $green: 24%, $blue: 48% + ); +} + +<===> all/output.css +a { + b: color(prophoto-rgb 0.296 0.62 0.844); +} + +<===> +================================================================================ +<===> alpha_input/input.scss +@use 'sass:color'; +a { + b: color.scale( + color(prophoto-rgb 0.2 0.5 0.7 / 0.3), + $red: 12%, $green: 24%, $blue: 48% + ); +} + +<===> alpha_input/output.css +a { + b: color(prophoto-rgb 0.296 0.62 0.844 / 0.3); +} + +<===> +================================================================================ +<===> alpha_arg/input.scss +@use 'sass:color'; +a { + b: color.scale( + color(prophoto-rgb 0.2 0.5 0.7), + $red: 12%, $green: 24%, $blue: 48%, $alpha: -70% + ); +} + +<===> alpha_arg/output.css +a { + b: color(prophoto-rgb 0.296 0.62 0.844 / 0.3); +} + +<===> +================================================================================ +<===> named/input.scss +@use 'sass:color'; +a { + b: color.scale( + $color: color(prophoto-rgb 0.2 0.5 0.7), + $red: 12%, $green: 24%, $blue: 48% + ); +} + +<===> named/output.css +a { + b: color(prophoto-rgb 0.296 0.62 0.844); +} diff --git a/spec/core_functions/color/scale/rec2020.hrx b/spec/core_functions/color/scale/rec2020.hrx new file mode 100644 index 000000000..5f05d3215 --- /dev/null +++ b/spec/core_functions/color/scale/rec2020.hrx @@ -0,0 +1,225 @@ +<===> red/max/input.scss +@use 'sass:color'; +a {b: color.scale(color(rec2020 0.2 0.5 0.7), $red: 100%)} + +<===> red/max/output.css +a { + b: color(rec2020 1 0.5 0.7); +} + +<===> +================================================================================ +<===> red/min/input.scss +@use 'sass:color'; +a {b: color.scale(color(rec2020 0.2 0.5 0.7), $red: -100%)} + +<===> red/min/output.css +a { + b: color(rec2020 0 0.5 0.7); +} + +<===> +================================================================================ +<===> red/zero/input.scss +@use 'sass:color'; +a {b: color.scale(color(rec2020 0.2 0.5 0.7), $red: 0%)} + +<===> red/zero/output.css +a { + b: color(rec2020 0.2 0.5 0.7); +} + +<===> +================================================================================ +<===> red/low/input.scss +@use 'sass:color'; +a {b: color.scale(color(rec2020 0.2 0.5 0.7), $red: -33%)} + +<===> red/low/output.css +a { + b: color(rec2020 0.134 0.5 0.7); +} + +<===> +================================================================================ +<===> red/high/input.scss +@use 'sass:color'; +a {b: color.scale(color(rec2020 0.2 0.5 0.7), $red: 86%)} + +<===> red/high/output.css +a { + b: color(rec2020 0.888 0.5 0.7); +} + +<===> +================================================================================ +<===> green/max/input.scss +@use 'sass:color'; +a {b: color.scale(color(rec2020 0.2 0.5 0.7), $green: 100%)} + +<===> green/max/output.css +a { + b: color(rec2020 0.2 1 0.7); +} + +<===> +================================================================================ +<===> green/min/input.scss +@use 'sass:color'; +a {b: color.scale(color(rec2020 0.2 0.5 0.7), $green: -100%)} + +<===> green/min/output.css +a { + b: color(rec2020 0.2 0 0.7); +} + +<===> +================================================================================ +<===> green/zero/input.scss +@use 'sass:color'; +a {b: color.scale(color(rec2020 0.2 0.5 0.7), $green: 0%)} + +<===> green/zero/output.css +a { + b: color(rec2020 0.2 0.5 0.7); +} + +<===> +================================================================================ +<===> green/low/input.scss +@use 'sass:color'; +a {b: color.scale(color(rec2020 0.2 0.5 0.7), $green: -86%)} + +<===> green/low/output.css +a { + b: color(rec2020 0.2 0.07 0.7); +} + +<===> +================================================================================ +<===> green/high/input.scss +@use 'sass:color'; +a {b: color.scale(color(rec2020 0.2 0.5 0.7), $green: 12%)} + +<===> green/high/output.css +a { + b: color(rec2020 0.2 0.56 0.7); +} + +<===> +================================================================================ +<===> blue/max/input.scss +@use 'sass:color'; +a {b: color.scale(color(rec2020 0.2 0.5 0.7), $blue: 100%)} + +<===> blue/max/output.css +a { + b: color(rec2020 0.2 0.5 1); +} + +<===> +================================================================================ +<===> blue/min/input.scss +@use 'sass:color'; +a {b: color.scale(color(rec2020 0.2 0.5 0.7), $blue: -100%)} + +<===> blue/min/output.css +a { + b: color(rec2020 0.2 0.5 0); +} + +<===> +================================================================================ +<===> blue/zero/input.scss +@use 'sass:color'; +a {b: color.scale(color(rec2020 0.2 0.5 0.7), $blue: 0%)} + +<===> blue/zero/output.css +a { + b: color(rec2020 0.2 0.5 0.7); +} + +<===> +================================================================================ +<===> blue/low/input.scss +@use 'sass:color'; +a {b: color.scale(color(rec2020 0.2 0.5 0.7), $blue: -16%)} + +<===> blue/low/output.css +a { + b: color(rec2020 0.2 0.5 0.588); +} + +<===> +================================================================================ +<===> blue/high/input.scss +@use 'sass:color'; +a {b: color.scale(color(rec2020 0.2 0.5 0.7), $blue: 42%)} + +<===> blue/high/output.css +a { + b: color(rec2020 0.2 0.5 0.826); +} + +<===> +================================================================================ +<===> all/input.scss +@use 'sass:color'; +a { + b: color.scale( + color(rec2020 0.2 0.5 0.7), $red: 12%, $green: 24%, $blue: 48% + ); +} + +<===> all/output.css +a { + b: color(rec2020 0.296 0.62 0.844); +} + +<===> +================================================================================ +<===> alpha_input/input.scss +@use 'sass:color'; +a { + b: color.scale( + color(rec2020 0.2 0.5 0.7 / 0.3), + $red: 12%, $green: 24%, $blue: 48% + ); +} + +<===> alpha_input/output.css +a { + b: color(rec2020 0.296 0.62 0.844 / 0.3); +} + +<===> +================================================================================ +<===> alpha_arg/input.scss +@use 'sass:color'; +a { + b: color.scale( + color(rec2020 0.2 0.5 0.7), + $red: 12%, $green: 24%, $blue: 48%, $alpha: -70% + ); +} + +<===> alpha_arg/output.css +a { + b: color(rec2020 0.296 0.62 0.844 / 0.3); +} + +<===> +================================================================================ +<===> named/input.scss +@use 'sass:color'; +a { + b: color.scale( + $color: color(rec2020 0.2 0.5 0.7), + $red: 12%, $green: 24%, $blue: 48% + ); +} + +<===> named/output.css +a { + b: color(rec2020 0.296 0.62 0.844); +} diff --git a/spec/core_functions/color/scale/srgb.hrx b/spec/core_functions/color/scale/srgb.hrx new file mode 100644 index 000000000..790cce490 --- /dev/null +++ b/spec/core_functions/color/scale/srgb.hrx @@ -0,0 +1,223 @@ +<===> red/max/input.scss +@use 'sass:color'; +a {b: color.scale(color(srgb 0.2 0.5 0.7), $red: 100%)} + +<===> red/max/output.css +a { + b: color(srgb 1 0.5 0.7); +} + +<===> +================================================================================ +<===> red/min/input.scss +@use 'sass:color'; +a {b: color.scale(color(srgb 0.2 0.5 0.7), $red: -100%)} + +<===> red/min/output.css +a { + b: color(srgb 0 0.5 0.7); +} + +<===> +================================================================================ +<===> red/zero/input.scss +@use 'sass:color'; +a {b: color.scale(color(srgb 0.2 0.5 0.7), $red: 0%)} + +<===> red/zero/output.css +a { + b: color(srgb 0.2 0.5 0.7); +} + +<===> +================================================================================ +<===> red/low/input.scss +@use 'sass:color'; +a {b: color.scale(color(srgb 0.2 0.5 0.7), $red: -33%)} + +<===> red/low/output.css +a { + b: color(srgb 0.134 0.5 0.7); +} + +<===> +================================================================================ +<===> red/high/input.scss +@use 'sass:color'; +a {b: color.scale(color(srgb 0.2 0.5 0.7), $red: 86%)} + +<===> red/high/output.css +a { + b: color(srgb 0.888 0.5 0.7); +} + +<===> +================================================================================ +<===> green/max/input.scss +@use 'sass:color'; +a {b: color.scale(color(srgb 0.2 0.5 0.7), $green: 100%)} + +<===> green/max/output.css +a { + b: color(srgb 0.2 1 0.7); +} + +<===> +================================================================================ +<===> green/min/input.scss +@use 'sass:color'; +a {b: color.scale(color(srgb 0.2 0.5 0.7), $green: -100%)} + +<===> green/min/output.css +a { + b: color(srgb 0.2 0 0.7); +} + +<===> +================================================================================ +<===> green/zero/input.scss +@use 'sass:color'; +a {b: color.scale(color(srgb 0.2 0.5 0.7), $green: 0%)} + +<===> green/zero/output.css +a { + b: color(srgb 0.2 0.5 0.7); +} + +<===> +================================================================================ +<===> green/low/input.scss +@use 'sass:color'; +a {b: color.scale(color(srgb 0.2 0.5 0.7), $green: -86%)} + +<===> green/low/output.css +a { + b: color(srgb 0.2 0.07 0.7); +} + +<===> +================================================================================ +<===> green/high/input.scss +@use 'sass:color'; +a {b: color.scale(color(srgb 0.2 0.5 0.7), $green: 12%)} + +<===> green/high/output.css +a { + b: color(srgb 0.2 0.56 0.7); +} + +<===> +================================================================================ +<===> blue/max/input.scss +@use 'sass:color'; +a {b: color.scale(color(srgb 0.2 0.5 0.7), $blue: 100%)} + +<===> blue/max/output.css +a { + b: color(srgb 0.2 0.5 1); +} + +<===> +================================================================================ +<===> blue/min/input.scss +@use 'sass:color'; +a {b: color.scale(color(srgb 0.2 0.5 0.7), $blue: -100%)} + +<===> blue/min/output.css +a { + b: color(srgb 0.2 0.5 0); +} + +<===> +================================================================================ +<===> blue/zero/input.scss +@use 'sass:color'; +a {b: color.scale(color(srgb 0.2 0.5 0.7), $blue: 0%)} + +<===> blue/zero/output.css +a { + b: color(srgb 0.2 0.5 0.7); +} + +<===> +================================================================================ +<===> blue/low/input.scss +@use 'sass:color'; +a {b: color.scale(color(srgb 0.2 0.5 0.7), $blue: -16%)} + +<===> blue/low/output.css +a { + b: color(srgb 0.2 0.5 0.588); +} + +<===> +================================================================================ +<===> blue/high/input.scss +@use 'sass:color'; +a {b: color.scale(color(srgb 0.2 0.5 0.7), $blue: 42%)} + +<===> blue/high/output.css +a { + b: color(srgb 0.2 0.5 0.826); +} + +<===> +================================================================================ +<===> all/input.scss +@use 'sass:color'; +a { + b: color.scale(color(srgb 0.2 0.5 0.7), $red: 12%, $green: 24%, $blue: 48%); +} + +<===> all/output.css +a { + b: color(srgb 0.296 0.62 0.844); +} + +<===> +================================================================================ +<===> alpha_input/input.scss +@use 'sass:color'; +a { + b: color.scale( + color(srgb 0.2 0.5 0.7 / 0.3), + $red: 12%, $green: 24%, $blue: 48% + ); +} + +<===> alpha_input/output.css +a { + b: color(srgb 0.296 0.62 0.844 / 0.3); +} + +<===> +================================================================================ +<===> alpha_arg/input.scss +@use 'sass:color'; +a { + b: color.scale( + color(srgb 0.2 0.5 0.7), + $red: 12%, $green: 24%, $blue: 48%, $alpha: -70% + ); +} + +<===> alpha_arg/output.css +a { + b: color(srgb 0.296 0.62 0.844 / 0.3); +} + +<===> +================================================================================ +<===> named/input.scss +@use 'sass:color'; +a { + b: color.scale( + $color: color(srgb 0.2 0.5 0.7), + $red: 12%, $green: 24%, $blue: 48% + ); +} + +<===> named/output.css +a { + b: color(srgb 0.296 0.62 0.844); +} diff --git a/spec/core_functions/color/scale/srgb_linear.hrx b/spec/core_functions/color/scale/srgb_linear.hrx new file mode 100644 index 000000000..461f03ee9 --- /dev/null +++ b/spec/core_functions/color/scale/srgb_linear.hrx @@ -0,0 +1,225 @@ +<===> red/max/input.scss +@use 'sass:color'; +a {b: color.scale(color(srgb-linear 0.2 0.5 0.7), $red: 100%)} + +<===> red/max/output.css +a { + b: color(srgb-linear 1 0.5 0.7); +} + +<===> +================================================================================ +<===> red/min/input.scss +@use 'sass:color'; +a {b: color.scale(color(srgb-linear 0.2 0.5 0.7), $red: -100%)} + +<===> red/min/output.css +a { + b: color(srgb-linear 0 0.5 0.7); +} + +<===> +================================================================================ +<===> red/zero/input.scss +@use 'sass:color'; +a {b: color.scale(color(srgb-linear 0.2 0.5 0.7), $red: 0%)} + +<===> red/zero/output.css +a { + b: color(srgb-linear 0.2 0.5 0.7); +} + +<===> +================================================================================ +<===> red/low/input.scss +@use 'sass:color'; +a {b: color.scale(color(srgb-linear 0.2 0.5 0.7), $red: -33%)} + +<===> red/low/output.css +a { + b: color(srgb-linear 0.134 0.5 0.7); +} + +<===> +================================================================================ +<===> red/high/input.scss +@use 'sass:color'; +a {b: color.scale(color(srgb-linear 0.2 0.5 0.7), $red: 86%)} + +<===> red/high/output.css +a { + b: color(srgb-linear 0.888 0.5 0.7); +} + +<===> +================================================================================ +<===> green/max/input.scss +@use 'sass:color'; +a {b: color.scale(color(srgb-linear 0.2 0.5 0.7), $green: 100%)} + +<===> green/max/output.css +a { + b: color(srgb-linear 0.2 1 0.7); +} + +<===> +================================================================================ +<===> green/min/input.scss +@use 'sass:color'; +a {b: color.scale(color(srgb-linear 0.2 0.5 0.7), $green: -100%)} + +<===> green/min/output.css +a { + b: color(srgb-linear 0.2 0 0.7); +} + +<===> +================================================================================ +<===> green/zero/input.scss +@use 'sass:color'; +a {b: color.scale(color(srgb-linear 0.2 0.5 0.7), $green: 0%)} + +<===> green/zero/output.css +a { + b: color(srgb-linear 0.2 0.5 0.7); +} + +<===> +================================================================================ +<===> green/low/input.scss +@use 'sass:color'; +a {b: color.scale(color(srgb-linear 0.2 0.5 0.7), $green: -86%)} + +<===> green/low/output.css +a { + b: color(srgb-linear 0.2 0.07 0.7); +} + +<===> +================================================================================ +<===> green/high/input.scss +@use 'sass:color'; +a {b: color.scale(color(srgb-linear 0.2 0.5 0.7), $green: 12%)} + +<===> green/high/output.css +a { + b: color(srgb-linear 0.2 0.56 0.7); +} + +<===> +================================================================================ +<===> blue/max/input.scss +@use 'sass:color'; +a {b: color.scale(color(srgb-linear 0.2 0.5 0.7), $blue: 100%)} + +<===> blue/max/output.css +a { + b: color(srgb-linear 0.2 0.5 1); +} + +<===> +================================================================================ +<===> blue/min/input.scss +@use 'sass:color'; +a {b: color.scale(color(srgb-linear 0.2 0.5 0.7), $blue: -100%)} + +<===> blue/min/output.css +a { + b: color(srgb-linear 0.2 0.5 0); +} + +<===> +================================================================================ +<===> blue/zero/input.scss +@use 'sass:color'; +a {b: color.scale(color(srgb-linear 0.2 0.5 0.7), $blue: 0%)} + +<===> blue/zero/output.css +a { + b: color(srgb-linear 0.2 0.5 0.7); +} + +<===> +================================================================================ +<===> blue/low/input.scss +@use 'sass:color'; +a {b: color.scale(color(srgb-linear 0.2 0.5 0.7), $blue: -16%)} + +<===> blue/low/output.css +a { + b: color(srgb-linear 0.2 0.5 0.588); +} + +<===> +================================================================================ +<===> blue/high/input.scss +@use 'sass:color'; +a {b: color.scale(color(srgb-linear 0.2 0.5 0.7), $blue: 42%)} + +<===> blue/high/output.css +a { + b: color(srgb-linear 0.2 0.5 0.826); +} + +<===> +================================================================================ +<===> all/input.scss +@use 'sass:color'; +a { + b: color.scale( + color(srgb-linear 0.2 0.5 0.7), $red: 12%, $green: 24%, $blue: 48% + ); +} + +<===> all/output.css +a { + b: color(srgb-linear 0.296 0.62 0.844); +} + +<===> +================================================================================ +<===> alpha_input/input.scss +@use 'sass:color'; +a { + b: color.scale( + color(srgb-linear 0.2 0.5 0.7 / 0.3), + $red: 12%, $green: 24%, $blue: 48% + ); +} + +<===> alpha_input/output.css +a { + b: color(srgb-linear 0.296 0.62 0.844 / 0.3); +} + +<===> +================================================================================ +<===> alpha_arg/input.scss +@use 'sass:color'; +a { + b: color.scale( + color(srgb-linear 0.2 0.5 0.7), + $red: 12%, $green: 24%, $blue: 48%, $alpha: -70% + ); +} + +<===> alpha_arg/output.css +a { + b: color(srgb-linear 0.296 0.62 0.844 / 0.3); +} + +<===> +================================================================================ +<===> named/input.scss +@use 'sass:color'; +a { + b: color.scale( + $color: color(srgb-linear 0.2 0.5 0.7), + $red: 12%, $green: 24%, $blue: 48% + ); +} + +<===> named/output.css +a { + b: color(srgb-linear 0.296 0.62 0.844); +} diff --git a/spec/core_functions/color/scale/xyz_d50.hrx b/spec/core_functions/color/scale/xyz_d50.hrx new file mode 100644 index 000000000..d07168fea --- /dev/null +++ b/spec/core_functions/color/scale/xyz_d50.hrx @@ -0,0 +1,217 @@ +<===> x/max/input.scss +@use 'sass:color'; +a {b: color.scale(color(xyz-d50 0.2 0.5 0.7), $x: 100%)} + +<===> x/max/output.css +a { + b: color(xyz-d50 1 0.5 0.7); +} + +<===> +================================================================================ +<===> x/min/input.scss +@use 'sass:color'; +a {b: color.scale(color(xyz-d50 0.2 0.5 0.7), $x: -100%)} + +<===> x/min/output.css +a { + b: color(xyz-d50 0 0.5 0.7); +} + +<===> +================================================================================ +<===> x/zero/input.scss +@use 'sass:color'; +a {b: color.scale(color(xyz-d50 0.2 0.5 0.7), $x: 0%)} + +<===> x/zero/output.css +a { + b: color(xyz-d50 0.2 0.5 0.7); +} + +<===> +================================================================================ +<===> x/low/input.scss +@use 'sass:color'; +a {b: color.scale(color(xyz-d50 0.2 0.5 0.7), $x: -33%)} + +<===> x/low/output.css +a { + b: color(xyz-d50 0.134 0.5 0.7); +} + +<===> +================================================================================ +<===> x/high/input.scss +@use 'sass:color'; +a {b: color.scale(color(xyz-d50 0.2 0.5 0.7), $x: 86%)} + +<===> x/high/output.css +a { + b: color(xyz-d50 0.888 0.5 0.7); +} + +<===> +================================================================================ +<===> y/max/input.scss +@use 'sass:color'; +a {b: color.scale(color(xyz-d50 0.2 0.5 0.7), $y: 100%)} + +<===> y/max/output.css +a { + b: color(xyz-d50 0.2 1 0.7); +} + +<===> +================================================================================ +<===> y/min/input.scss +@use 'sass:color'; +a {b: color.scale(color(xyz-d50 0.2 0.5 0.7), $y: -100%)} + +<===> y/min/output.css +a { + b: color(xyz-d50 0.2 0 0.7); +} + +<===> +================================================================================ +<===> y/zero/input.scss +@use 'sass:color'; +a {b: color.scale(color(xyz-d50 0.2 0.5 0.7), $y: 0%)} + +<===> y/zero/output.css +a { + b: color(xyz-d50 0.2 0.5 0.7); +} + +<===> +================================================================================ +<===> y/low/input.scss +@use 'sass:color'; +a {b: color.scale(color(xyz-d50 0.2 0.5 0.7), $y: -86%)} + +<===> y/low/output.css +a { + b: color(xyz-d50 0.2 0.07 0.7); +} + +<===> +================================================================================ +<===> y/high/input.scss +@use 'sass:color'; +a {b: color.scale(color(xyz-d50 0.2 0.5 0.7), $y: 12%)} + +<===> y/high/output.css +a { + b: color(xyz-d50 0.2 0.56 0.7); +} + +<===> +================================================================================ +<===> z/max/input.scss +@use 'sass:color'; +a {b: color.scale(color(xyz-d50 0.2 0.5 0.7), $z: 100%)} + +<===> z/max/output.css +a { + b: color(xyz-d50 0.2 0.5 1); +} + +<===> +================================================================================ +<===> z/min/input.scss +@use 'sass:color'; +a {b: color.scale(color(xyz-d50 0.2 0.5 0.7), $z: -100%)} + +<===> z/min/output.css +a { + b: color(xyz-d50 0.2 0.5 0); +} + +<===> +================================================================================ +<===> z/zero/input.scss +@use 'sass:color'; +a {b: color.scale(color(xyz-d50 0.2 0.5 0.7), $z: 0%)} + +<===> z/zero/output.css +a { + b: color(xyz-d50 0.2 0.5 0.7); +} + +<===> +================================================================================ +<===> z/low/input.scss +@use 'sass:color'; +a {b: color.scale(color(xyz-d50 0.2 0.5 0.7), $z: -16%)} + +<===> z/low/output.css +a { + b: color(xyz-d50 0.2 0.5 0.588); +} + +<===> +================================================================================ +<===> z/high/input.scss +@use 'sass:color'; +a {b: color.scale(color(xyz-d50 0.2 0.5 0.7), $z: 42%)} + +<===> z/high/output.css +a { + b: color(xyz-d50 0.2 0.5 0.826); +} + +<===> +================================================================================ +<===> all/input.scss +@use 'sass:color'; +a { + b: color.scale(color(xyz-d50 0.2 0.5 0.7), $x: 12%, $y: 24%, $z: 48%); +} + +<===> all/output.css +a { + b: color(xyz-d50 0.296 0.62 0.844); +} + +<===> +================================================================================ +<===> alpha_input/input.scss +@use 'sass:color'; +a { + b: color.scale(color(xyz-d50 0.2 0.5 0.7 / 0.3), $x: 12%, $y: 24%, $z: 48%); +} + +<===> alpha_input/output.css +a { + b: color(xyz-d50 0.296 0.62 0.844 / 0.3); +} + +<===> +================================================================================ +<===> alpha_arg/input.scss +@use 'sass:color'; +a { + b: color.scale( + color(xyz-d50 0.2 0.5 0.7), + $x: 12%, $y: 24%, $z: 48%, $alpha: -70% + ); +} + +<===> alpha_arg/output.css +a { + b: color(xyz-d50 0.296 0.62 0.844 / 0.3); +} + +<===> +================================================================================ +<===> named/input.scss +@use 'sass:color'; +a { + b: color.scale($color: color(xyz-d50 0.2 0.5 0.7), $x: 12%, $y: 24%, $z: 48%); +} + +<===> named/output.css +a { + b: color(xyz-d50 0.296 0.62 0.844); +} diff --git a/spec/core_functions/color/scale/xyz_d65.hrx b/spec/core_functions/color/scale/xyz_d65.hrx new file mode 100644 index 000000000..e115d7426 --- /dev/null +++ b/spec/core_functions/color/scale/xyz_d65.hrx @@ -0,0 +1,217 @@ +<===> x/max/input.scss +@use 'sass:color'; +a {b: color.scale(color(xyz-d65 0.2 0.5 0.7), $x: 100%)} + +<===> x/max/output.css +a { + b: color(xyz 1 0.5 0.7); +} + +<===> +================================================================================ +<===> x/min/input.scss +@use 'sass:color'; +a {b: color.scale(color(xyz-d65 0.2 0.5 0.7), $x: -100%)} + +<===> x/min/output.css +a { + b: color(xyz 0 0.5 0.7); +} + +<===> +================================================================================ +<===> x/zero/input.scss +@use 'sass:color'; +a {b: color.scale(color(xyz-d65 0.2 0.5 0.7), $x: 0%)} + +<===> x/zero/output.css +a { + b: color(xyz 0.2 0.5 0.7); +} + +<===> +================================================================================ +<===> x/low/input.scss +@use 'sass:color'; +a {b: color.scale(color(xyz-d65 0.2 0.5 0.7), $x: -33%)} + +<===> x/low/output.css +a { + b: color(xyz 0.134 0.5 0.7); +} + +<===> +================================================================================ +<===> x/high/input.scss +@use 'sass:color'; +a {b: color.scale(color(xyz-d65 0.2 0.5 0.7), $x: 86%)} + +<===> x/high/output.css +a { + b: color(xyz 0.888 0.5 0.7); +} + +<===> +================================================================================ +<===> y/max/input.scss +@use 'sass:color'; +a {b: color.scale(color(xyz-d65 0.2 0.5 0.7), $y: 100%)} + +<===> y/max/output.css +a { + b: color(xyz 0.2 1 0.7); +} + +<===> +================================================================================ +<===> y/min/input.scss +@use 'sass:color'; +a {b: color.scale(color(xyz-d65 0.2 0.5 0.7), $y: -100%)} + +<===> y/min/output.css +a { + b: color(xyz 0.2 0 0.7); +} + +<===> +================================================================================ +<===> y/zero/input.scss +@use 'sass:color'; +a {b: color.scale(color(xyz-d65 0.2 0.5 0.7), $y: 0%)} + +<===> y/zero/output.css +a { + b: color(xyz 0.2 0.5 0.7); +} + +<===> +================================================================================ +<===> y/low/input.scss +@use 'sass:color'; +a {b: color.scale(color(xyz-d65 0.2 0.5 0.7), $y: -86%)} + +<===> y/low/output.css +a { + b: color(xyz 0.2 0.07 0.7); +} + +<===> +================================================================================ +<===> y/high/input.scss +@use 'sass:color'; +a {b: color.scale(color(xyz-d65 0.2 0.5 0.7), $y: 12%)} + +<===> y/high/output.css +a { + b: color(xyz 0.2 0.56 0.7); +} + +<===> +================================================================================ +<===> z/max/input.scss +@use 'sass:color'; +a {b: color.scale(color(xyz-d65 0.2 0.5 0.7), $z: 100%)} + +<===> z/max/output.css +a { + b: color(xyz 0.2 0.5 1); +} + +<===> +================================================================================ +<===> z/min/input.scss +@use 'sass:color'; +a {b: color.scale(color(xyz-d65 0.2 0.5 0.7), $z: -100%)} + +<===> z/min/output.css +a { + b: color(xyz 0.2 0.5 0); +} + +<===> +================================================================================ +<===> z/zero/input.scss +@use 'sass:color'; +a {b: color.scale(color(xyz-d65 0.2 0.5 0.7), $z: 0%)} + +<===> z/zero/output.css +a { + b: color(xyz 0.2 0.5 0.7); +} + +<===> +================================================================================ +<===> z/low/input.scss +@use 'sass:color'; +a {b: color.scale(color(xyz-d65 0.2 0.5 0.7), $z: -16%)} + +<===> z/low/output.css +a { + b: color(xyz 0.2 0.5 0.588); +} + +<===> +================================================================================ +<===> z/high/input.scss +@use 'sass:color'; +a {b: color.scale(color(xyz-d65 0.2 0.5 0.7), $z: 42%)} + +<===> z/high/output.css +a { + b: color(xyz 0.2 0.5 0.826); +} + +<===> +================================================================================ +<===> all/input.scss +@use 'sass:color'; +a { + b: color.scale(color(xyz-d65 0.2 0.5 0.7), $x: 12%, $y: 24%, $z: 48%); +} + +<===> all/output.css +a { + b: color(xyz 0.296 0.62 0.844); +} + +<===> +================================================================================ +<===> alpha_input/input.scss +@use 'sass:color'; +a { + b: color.scale(color(xyz-d65 0.2 0.5 0.7 / 0.3), $x: 12%, $y: 24%, $z: 48%); +} + +<===> alpha_input/output.css +a { + b: color(xyz 0.296 0.62 0.844 / 0.3); +} + +<===> +================================================================================ +<===> alpha_arg/input.scss +@use 'sass:color'; +a { + b: color.scale( + color(xyz-d65 0.2 0.5 0.7), + $x: 12%, $y: 24%, $z: 48%, $alpha: -70% + ); +} + +<===> alpha_arg/output.css +a { + b: color(xyz 0.296 0.62 0.844 / 0.3); +} + +<===> +================================================================================ +<===> named/input.scss +@use 'sass:color'; +a { + b: color.scale($color: color(xyz-d65 0.2 0.5 0.7), $x: 12%, $y: 24%, $z: 48%); +} + +<===> named/output.css +a { + b: color(xyz 0.296 0.62 0.844); +} From 5da2e6b56b5a2672aae6aefb9a6226b344534fcb Mon Sep 17 00:00:00 2001 From: Natalie Weizenbaum Date: Tue, 7 May 2024 16:44:38 -0700 Subject: [PATCH 4/4] Fix a test that still had change --- spec/core_functions/color/scale/error/type.hrx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/spec/core_functions/color/scale/error/type.hrx b/spec/core_functions/color/scale/error/type.hrx index ad7eeddd7..a45a9ec64 100644 --- a/spec/core_functions/color/scale/error/type.hrx +++ b/spec/core_functions/color/scale/error/type.hrx @@ -98,13 +98,13 @@ Error: $alpha: c is not a number. ================================================================================ <===> none/input.scss @use 'sass:color'; -a {b: color.change(red, $alpha: none)} +a {b: color.scale(red, $alpha: none)} <===> none/error Error: $alpha: none is not a number. , -2 | a {b: color.change(red, $alpha: none)} - | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ +2 | a {b: color.scale(red, $alpha: none)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ' input.scss 2:7 root stylesheet