Merge branch 'feature.color-4' into js-api-color-4

* feature.color-4:
  [Color 4] Add tests for missing channels in legacy color spaces (sass#1948)
  [Color 4] Add tests for oklch() (sass#1945)
  [Color 4] Add tests for the color() function (sass#1943)

spec/core_functions/color/color/README.md

@@ -0,0 +1,2 @@
+Some of the same behavior tested for `lab()` applies to this function as well,
+but for terseness' sake isn't tested explicitly.

spec/core_functions/color/color/_rgb-utils.scss

@@ -0,0 +1,27 @@
+@use 'sass:color';
+@use 'sass:list';
+@use 'sass:meta';
+
+@function -real-channel($color, $channel) {
+  @if color.is-missing($color, $channel) {
+    @return none;
+  } @else {
+    @return color.channel($color, $channel);
+  }
+}
+
+@mixin inspect($color) {
+  a {
+    value: $color;
+    @if meta.type-of($color) == string {
+      type: string;
+    } @else {
+      channels: list.slash(
+        -real-channel($color, 'red')
+          -real-channel($color, 'green')
+          -real-channel($color, 'blue'),
+        -real-channel($color, 'alpha')
+      );
+    }
+  }
+}

spec/core_functions/color/color/_xyz-utils.scss

@@ -0,0 +1,27 @@
+@use 'sass:color';
+@use 'sass:list';
+@use 'sass:meta';
+
+@function -real-channel($color, $channel) {
+  @if color.is-missing($color, $channel) {
+    @return none;
+  } @else {
+    @return color.channel($color, $channel);
+  }
+}
+
+@mixin inspect($color) {
+  a {
+    value: $color;
+    @if meta.type-of($color) == string {
+      type: string;
+    } @else {
+      channels: list.slash(
+        -real-channel($color, 'x')
+          -real-channel($color, 'y')
+          -real-channel($color, 'z'),
+        -real-channel($color, 'alpha')
+      );
+    }
+  }
+}

spec/core_functions/color/color/alpha.hrx

@@ -0,0 +1,145 @@
+<===> transparent/input.scss
+@use 'core_functions/color/color/rgb-utils';
+@include rgb-utils.inspect(color(srgb 0.1 0.2 0.3 / 0));
+
+<===> transparent/output.css
+a {
+  value: color(srgb 0.1 0.2 0.3 / 0);
+  channels: 0.1 0.2 0.3 / 0;
+}
+
+<===>
+================================================================================
+<===> opaque/input.scss
+@use 'core_functions/color/color/rgb-utils';
+@include rgb-utils.inspect(color(srgb 0.1 0.2 0.3 / 1));
+
+<===> opaque/output.css
+a {
+  value: color(srgb 0.1 0.2 0.3);
+  channels: 0.1 0.2 0.3 / 1;
+}
+
+<===>
+================================================================================
+<===> partial/input.scss
+@use 'core_functions/color/color/rgb-utils';
+@include rgb-utils.inspect(color(srgb 0.1 0.2 0.3 / 0.4));
+
+<===> partial/output.css
+a {
+  value: color(srgb 0.1 0.2 0.3 / 0.4);
+  channels: 0.1 0.2 0.3 / 0.4;
+}
+
+<===>
+================================================================================
+<===> percent/input.scss
+@use 'core_functions/color/color/rgb-utils';
+@include rgb-utils.inspect(color(srgb 0.1 0.2 0.3 / 40%));
+
+<===> percent/output.css
+a {
+  value: color(srgb 0.1 0.2 0.3 / 0.4);
+  channels: 0.1 0.2 0.3 / 0.4;
+}
+
+<===>
+================================================================================
+<===> named/input.scss
+@use 'core_functions/color/color/rgb-utils';
+@include rgb-utils.inspect(color($description: srgb 0.1 0.2 0.3 / 0.4));
+
+<===> named/output.css
+a {
+  value: color(srgb 0.1 0.2 0.3 / 0.4);
+  channels: 0.1 0.2 0.3 / 0.4;
+}
+
+<===>
+================================================================================
+<===> slash_list/input.scss
+@use "sass:list";
+@use 'core_functions/color/color/rgb-utils';
+@include rgb-utils.inspect(color(list.slash(srgb 0.1 0.2 0.3, 0.4)));
+
+<===> slash_list/output.css
+a {
+  value: color(srgb 0.1 0.2 0.3 / 0.4);
+  channels: 0.1 0.2 0.3 / 0.4;
+}
+
+<===>
+================================================================================
+<===> none/slash/blue/input.scss
+@use 'core_functions/color/color/rgb-utils';
+@include rgb-utils.inspect(color(srgb 0.1 0.2 none / 0.4));
+
+<===> none/slash/blue/output.css
+a {
+  value: color(srgb 0.1 0.2 none / 0.4);
+  channels: 0.1 0.2 none / 0.4;
+}
+
+<===>
+================================================================================
+<===> none/slash/alpha/input.scss
+@use 'core_functions/color/color/rgb-utils';
+@include rgb-utils.inspect(color(srgb 0.1 0.2 0.3 / none));
+
+<===> none/slash/alpha/output.css
+a {
+  value: color(srgb 0.1 0.2 0.3 / none);
+  channels: 0.1 0.2 0.3 / none;
+}
+
+<===>
+================================================================================
+<===> none/slash_list/blue/input.scss
+@use 'sass:list';
+@use 'core_functions/color/color/rgb-utils';
+@include rgb-utils.inspect(color(list.slash(srgb 0.1 0.2 none, 0.4)));
+
+<===> none/slash_list/blue/output.css
+a {
+  value: color(srgb 0.1 0.2 none / 0.4);
+  channels: 0.1 0.2 none / 0.4;
+}
+
+<===>
+================================================================================
+<===> none/slash_list/alpha/input.scss
+@use 'sass:list';
+@use 'core_functions/color/color/rgb-utils';
+@include rgb-utils.inspect(color(list.slash(srgb 0.1 0.2 0.3, none)));
+
+<===> none/slash_list/alpha/output.css
+a {
+  value: color(srgb 0.1 0.2 0.3 / none);
+  channels: 0.1 0.2 0.3 / none;
+}
+
+<===>
+================================================================================
+<===> relative_color/slash/input.scss
+@use 'core_functions/color/color/rgb-utils';
+@include rgb-utils.inspect(color(from #aaa srgb r g b / 25%));
+
+<===> relative_color/slash/output.css
+a {
+  value: color(from #aaa srgb r g b/25%);
+  type: string;
+}
+
+<===>
+================================================================================
+<===> relative_color/slash_list/input.scss
+@use 'sass:list';
+@use 'core_functions/color/color/rgb-utils';
+@include rgb-utils.inspect(color(list.slash(from #aaa srgb r g b, 25%)));
+
+<===> relative_color/slash_list/output.css
+a {
+  value: color(from #aaa srgb r g b / 25%);
+  type: string;
+}