[Color 4] Add tests for none in color.change() (#1985)

spec/core_functions/color/change/a98_rgb.hrx

@@ -29,6 +29,17 @@ a {
   b: color(a98-rgb 1.2 0.5 0.7);
 }
 
+<===>
+================================================================================
+<===> red/none/input.scss
+@use 'sass:color';
+a {b: color.change(color(a98-rgb 0.2 0.5 0.7), $red: none)}
+
+<===> red/none/output.css
+a {
+  b: color(a98-rgb none 0.5 0.7);
+}
+
 <===>
 ================================================================================
 <===> green/unitless/input.scss
@@ -62,6 +73,17 @@ a {
   b: color(a98-rgb 0.2 -0.2 0.7);
 }
 
+<===>
+================================================================================
+<===> green/none/input.scss
+@use 'sass:color';
+a {b: color.change(color(a98-rgb 0.2 0.5 0.7), $green: none)}
+
+<===> green/none/output.css
+a {
+  b: color(a98-rgb 0.2 none 0.7);
+}
+
 <===>
 ================================================================================
 <===> blue/unitless/input.scss
@@ -95,6 +117,17 @@ a {
   b: color(a98-rgb 0.2 0.5 100);
 }
 
+<===>
+================================================================================
+<===> blue/none/input.scss
+@use 'sass:color';
+a {b: color.change(color(a98-rgb 0.2 0.5 0.7), $blue: none)}
+
+<===> blue/none/output.css
+a {
+  b: color(a98-rgb 0.2 0.5 none);
+}
+
 <===>
 ================================================================================
 <===> all/input.scss

spec/core_functions/color/change/display_p3.hrx

@@ -29,6 +29,17 @@ a {
   b: color(display-p3 1.2 0.5 0.7);
 }
 
+<===>
+================================================================================
+<===> red/none/input.scss
+@use 'sass:color';
+a {b: color.change(color(display-p3 0.2 0.5 0.7), $red: none)}
+
+<===> red/none/output.css
+a {
+  b: color(display-p3 none 0.5 0.7);
+}
+
 <===>
 ================================================================================
 <===> green/unitless/input.scss
@@ -62,6 +73,17 @@ a {
   b: color(display-p3 0.2 -0.2 0.7);
 }
 
+<===>
+================================================================================
+<===> green/none/input.scss
+@use 'sass:color';
+a {b: color.change(color(display-p3 0.2 0.5 0.7), $green: none)}
+
+<===> green/none/output.css
+a {
+  b: color(display-p3 0.2 none 0.7);
+}
+
 <===>
 ================================================================================
 <===> blue/unitless/input.scss
@@ -95,6 +117,17 @@ a {
   b: color(display-p3 0.2 0.5 100);
 }
 
+<===>
+================================================================================
+<===> blue/none/input.scss
+@use 'sass:color';
+a {b: color.change(color(display-p3 0.2 0.5 0.7), $blue: none)}
+
+<===> blue/none/output.css
+a {
+  b: color(display-p3 0.2 0.5 none);
+}
+
 <===>
 ================================================================================
 <===> all/input.scss

spec/core_functions/color/change/error/type.hrx

@@ -101,13 +101,27 @@ Error: $lightness: c is not a number or unquoted "none".
 a {b: color.change(red, $alpha: c)}
 
 <===> alpha/error
-Error: $alpha: c is not a number.
+Error: $alpha: c is not a number or unquoted "none".
   ,
 2 | a {b: color.change(red, $alpha: c)}
   |       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   '
   input.scss 2:7  root stylesheet
 
+<===>
+================================================================================
+<===> quoted_none/input.scss
+@use 'sass:color';
+a {b: color.change(red, $alpha: "none")}
+
+<===> quoted_none/error
+Error: $alpha: "none" is not a number or unquoted "none".
+  ,
+2 | a {b: color.change(red, $alpha: "none")}
+  |       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+  '
+  input.scss 2:7  root stylesheet
+
 <===>
 ================================================================================
 <===> blackness/input.scss

spec/core_functions/color/change/hsl.hrx

@@ -62,6 +62,17 @@ a {
   b: rgb(255, 2.125, 0);
 }
 
+<===>
+================================================================================
+<===> hue/none/input.scss
+@use 'sass:color';
+a {b: color.change(hsl(0deg 100% 50%), $hue: none)}
+
+<===> hue/none/output.css
+a {
+  b: hsl(none 100% 50%);
+}
+
 <===>
 ================================================================================
 <===> saturation/max/input.scss
@@ -128,6 +139,17 @@ a {
   b: rgb(177.6, 203.4, 177.6);
 }
 
+<===>
+================================================================================
+<===> saturation/none/input.scss
+@use 'sass:color';
+a {b: color.change(hsl(0deg 100% 50%), $saturation: none)}
+
+<===> saturation/none/output.css
+a {
+  b: hsl(0deg none 50%);
+}
+
 <===>
 ================================================================================
 <===> lightness/max/input.scss
@@ -205,6 +227,17 @@ a {
   b: hsl(0, 100%, -20%);
 }
 
+<===>
+================================================================================
+<===> lightness/none/input.scss
+@use 'sass:color';
+a {b: color.change(hsl(0deg 100% 50%), $lightness: none)}
+
+<===> lightness/none/output.css
+a {
+  b: hsl(0deg 100% none);
+}
+
 <===>
 ================================================================================
 <===> all/input.scss

spec/core_functions/color/change/hwb.hrx

@@ -40,6 +40,17 @@ a {
   b: #cc3333;
 }
 
+<===>
+================================================================================
+<===> whiteness/none/input.scss
+@use 'sass:color';
+a {b: color.change(hwb(180deg 30% 50%), $whiteness: none)}
+
+<===> whiteness/none/output.css
+a {
+  b: hwb(180deg none 50%);
+}
+
 <===>
 ================================================================================
 <===> blackness/max/input.scss
@@ -84,6 +95,17 @@ a {
   b: #cc3333;
 }
 
+<===>
+================================================================================
+<===> blackness/none/input.scss
+@use 'sass:color';
+a {b: color.change(hwb(180deg 30% 50%), $blackness: none)}
+
+<===> blackness/none/output.css
+a {
+  b: hwb(180deg 30% none);
+}
+
 <===>
 ================================================================================
 <===> out_of_range/input.scss

spec/core_functions/color/change/lab.hrx

@@ -29,6 +29,17 @@ a {
   b: color-mix(in lab, color(xyz 1.7255148283 1.6190494947 2.5266428703) 100%, black);
 }
 
+<===>
+================================================================================
+<===> lightness/none/input.scss
+@use 'sass:color';
+a {b: color.change(lab(50% 20 -30), $lightness: none)}
+
+<===> lightness/none/output.css
+a {
+  b: lab(none 20 -30);
+}
+
 <===>
 ================================================================================
 <===> a/unitless/input.scss
@@ -62,6 +73,17 @@ a {
   b: lab(50% 200 -30);
 }
 
+<===>
+================================================================================
+<===> a/none/input.scss
+@use 'sass:color';
+a {b: color.change(lab(50% 20 -30), $a: none)}
+
+<===> a/none/output.css
+a {
+  b: lab(50% none -30);
+}
+
 <===>
 ================================================================================
 <===> b/unitless/input.scss
@@ -95,6 +117,17 @@ a {
   b: lab(50% 20 -200);
 }
 
+<===>
+================================================================================
+<===> b/none/input.scss
+@use 'sass:color';
+a {b: color.change(lab(50% 20 -30), $b: none)}
+
+<===> b/none/output.css
+a {
+  b: lab(50% 20 none);
+}
+
 <===>
 ================================================================================
 <===> all/input.scss

spec/core_functions/color/change/lch.hrx

@@ -29,6 +29,17 @@ a {
   b: color-mix(in lch, color(xyz 1.6569354424 1.6040925936 1.5400032443) 100%, black);
 }
 
+<===>
+================================================================================
+<===> lightness/none/input.scss
+@use 'sass:color';
+a {b: color.change(lch(50% 20 30deg), $lightness: none)}
+
+<===> lightness/none/output.css
+a {
+  b: lch(none 20 30deg);
+}
+
 <===>
 ================================================================================
 <===> chroma/unitless/input.scss
@@ -73,6 +84,17 @@ a {
   b: lch(50% 200 30deg);
 }
 
+<===>
+================================================================================
+<===> chroma/none/input.scss
+@use 'sass:color';
+a {b: color.change(lch(50% 20 30deg), $chroma: none)}
+
+<===> chroma/none/output.css
+a {
+  b: lch(50% none 30deg);
+}
+
 <===>
 ================================================================================
 <===> hue/unitless/input.scss
@@ -106,6 +128,17 @@ a {
   b: lch(50% 20 40deg);
 }
 
+<===>
+================================================================================
+<===> hue/none/input.scss
+@use 'sass:color';
+a {b: color.change(lch(50% 20 30deg), $hue: none)}
+
+<===> hue/none/output.css
+a {
+  b: lch(50% 20 none);
+}
+
 <===>
 ================================================================================
 <===> all/input.scss

spec/core_functions/color/change/no_space.hrx

@@ -129,3 +129,14 @@ See https://sass-lang.com/d/function-units
   |       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   '
     input.scss 2:7  root stylesheet
+
+<===>
+================================================================================
+<===> alpha/none/input.scss
+@use 'sass:color';
+a {b: color.change(red, $alpha: none)}
+
+<===> alpha/none/output.css
+a {
+  b: rgb(255 0 0 / none);
+}

spec/core_functions/color/change/none_case.hrx

@@ -0,0 +1,30 @@
+<===> legacy/input.scss
+@use 'sass:color';
+a {b: color.change(red, $blue: NoNe)}
+
+<===> legacy/output.css
+a {
+  b: rgb(255 0 none);
+}
+
+<===>
+================================================================================
+<===> non_legacy/input.scss
+@use 'sass:color';
+a {b: color.change(lab(50% 10 20), $a: nOnE)}
+
+<===> non_legacy/output.css
+a {
+  b: lab(50% none 20);
+}
+
+<===>
+================================================================================
+<===> alpha/input.scss
+@use 'sass:color';
+a {b: color.change(red, $alpha: NONE)}
+
+<===> alpha/output.css
+a {
+  b: rgb(255 0 0 / none);
+}