diff --git a/spec/core_functions/color/color/README.md b/spec/core_functions/color/color/README.md new file mode 100644 index 000000000..5117c908e --- /dev/null +++ b/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. diff --git a/spec/core_functions/color/color/_rgb-utils.scss b/spec/core_functions/color/color/_rgb-utils.scss new file mode 100644 index 000000000..266f54772 --- /dev/null +++ b/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') + ); + } + } +} diff --git a/spec/core_functions/color/color/_xyz-utils.scss b/spec/core_functions/color/color/_xyz-utils.scss new file mode 100644 index 000000000..8290223bd --- /dev/null +++ b/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') + ); + } + } +} diff --git a/spec/core_functions/color/color/alpha.hrx b/spec/core_functions/color/color/alpha.hrx new file mode 100644 index 000000000..3e672f825 --- /dev/null +++ b/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; +} diff --git a/spec/core_functions/color/color/error.hrx b/spec/core_functions/color/color/error.hrx new file mode 100644 index 000000000..7bf9c7c8c --- /dev/null +++ b/spec/core_functions/color/color/error.hrx @@ -0,0 +1,279 @@ +<===> unit/red/input.scss +a {b: color(srgb 0.1px 0.2 0.3)} + +<===> unit/red/error +Error: $red: Expected 0.1px to have unit "%" or no units. + , +1 | a {b: color(srgb 0.1px 0.2 0.3)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 1:7 root stylesheet + +<===> +================================================================================ +<===> unit/green/input.scss +a {b: color(srgb 0.1 0.2px 0.3)} + +<===> unit/green/error +Error: $green: Expected 0.2px to have unit "%" or no units. + , +1 | a {b: color(srgb 0.1 0.2px 0.3)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 1:7 root stylesheet + +<===> +================================================================================ +<===> unit/blue/input.scss +a {b: color(srgb 0.1 0.2 0.3px)} + +<===> unit/blue/error +Error: $blue: Expected 0.3px to have unit "%" or no units. + , +1 | a {b: color(srgb 0.1 0.2 0.3px)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 1:7 root stylesheet + +<===> +================================================================================ +<===> unit/alpha/slash/input.scss +a {b: color(srgb 0.1 0.2 0.3/0.4px)} + +<===> unit/alpha/slash/error +Error: $alpha: Expected 0.4px to have unit "%" or no units. + , +1 | a {b: color(srgb 0.1 0.2 0.3/0.4px)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 1:7 root stylesheet + +<===> +================================================================================ +<===> unit/alpha/slash_list/input.scss +@use 'sass:list'; +a {b: color(list.slash(srgb 0.1 0.2 0.3, 0.4px))} + +<===> unit/alpha/slash_list/error +Error: $alpha: Expected 0.4px to have unit "%" or no units. + , +2 | a {b: color(list.slash(srgb 0.1 0.2 0.3, 0.4px))} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> type/red/input.scss +a {b: color(srgb c 0.2 0.3)} + +<===> type/red/error +Error: $description: Expected red channel to be a number, was c. + , +1 | a {b: color(srgb c 0.2 0.3)} + | ^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 1:7 root stylesheet + +<===> +================================================================================ +<===> type/green/input.scss +a {b: color(srgb 0.1 c 0.3)} + +<===> type/green/error +Error: $description: Expected green channel to be a number, was c. + , +1 | a {b: color(srgb 0.1 c 0.3)} + | ^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 1:7 root stylesheet + +<===> +================================================================================ +<===> type/blue/input.scss +a {b: color(srgb 0.1 0.2 c)} + +<===> type/blue/error +Error: $description: Expected blue channel to be a number, was c. + , +1 | a {b: color(srgb 0.1 0.2 c)} + | ^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 1:7 root stylesheet + +<===> +================================================================================ +<===> type/alpha/slash_list/input.scss +@use 'sass:list'; +a {b: color(list.slash(srgb 0.1 0.2 0.3, c))} + +<===> type/alpha/slash_list/error +Error: $description: c is not a number. + , +2 | a {b: color(list.slash(srgb 0.1 0.2 0.3, c))} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> list/bracketed/input.scss +a {b: color([srgb 0.1 0.2 0.3])} + +<===> list/bracketed/error +Error: $description: Expected an unbracketed list, was [srgb 0.1 0.2 0.3] + , +1 | a {b: color([srgb 0.1 0.2 0.3])} + | ^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 1:7 root stylesheet + +<===> +================================================================================ +<===> list/comma/input.scss +a {b: color((srgb, 0.1, 0.2, 0.3))} + +<===> list/comma/error +Error: $description: Expected a space- or slash-separated list, was (srgb, 0.1, 0.2, 0.3) + , +1 | a {b: color((srgb, 0.1, 0.2, 0.3))} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 1:7 root stylesheet + +<===> +================================================================================ +<===> list/slash/three/input.scss +@use 'sass:list'; +a {b: color(list.slash(srgb 0.1, 0.2, 0.3))} + +<===> list/slash/three/error +Error: $description: Only 2 slash-separated elements allowed, but 3 were passed. + , +2 | a {b: color(list.slash(srgb 0.1, 0.2, 0.3))} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> list/slash/one/input.scss +@use 'sass:list'; +$single-arg-slash-separated: list.append((), srgb 0.1 0.2 0.3, $separator: slash); +a {b: color($single-arg-slash-separated)} + +<===> list/slash/one/error +Error: $description: Only 2 slash-separated elements allowed, but 1 was passed. + , +3 | a {b: color($single-arg-slash-separated)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 3:7 root stylesheet + +<===> +================================================================================ +<===> list/after_space/input.scss +a {b: color(srgb (0.1 0.2 0.3))} + +<===> list/after_space/error +Error: $description: Expected red channel to be a number, was (0.1 0.2 0.3). + , +1 | a {b: color(srgb (0.1 0.2 0.3))} + | ^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 1:7 root stylesheet + +<===> +================================================================================ +<===> list/too_few_channels/input.scss +a {b: color(srgb 0.1 0.2)} + +<===> list/too_few_channels/error +Error: $description: The srgb color space has 3 channels but (srgb 0.1 0.2) has 2. + , +1 | a {b: color(srgb 0.1 0.2)} + | ^^^^^^^^^^^^^^^^^^^ + ' + input.scss 1:7 root stylesheet + +<===> +================================================================================ +<===> list/too_many_channels/input.scss +a {b: color(srgb 0.1 0.2 0.3 0.4)} + +<===> list/too_many_channels/error +Error: $description: The srgb color space has 3 channels but (srgb 0.1 0.2 0.3 0.4) has 4. + , +1 | a {b: color(srgb 0.1 0.2 0.3 0.4)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 1:7 root stylesheet + +<===> +================================================================================ +<===> too_few_args/no_channels/input.scss +a {b: color(srgb)} + +<===> too_few_args/no_channels/error +Error: $description: The srgb color space has 3 channels but srgb has 0. + , +1 | a {b: color(srgb)} + | ^^^^^^^^^^^ + ' + input.scss 1:7 root stylesheet + +<===> +================================================================================ +<===> too_few_args/no_space/input.scss +a {b: color(1 2 3)} + +<===> too_few_args/no_space/error +Error: $description: 1 is not a string. + , +1 | a {b: color(1 2 3)} + | ^^^^^^^^^^^^ + ' + input.scss 1:7 root stylesheet + +<===> +================================================================================ +<===> too_few_args/none/input.scss +a {b: color()} + +<===> too_few_args/none/error +Error: Missing argument $description. + ,--> input.scss +1 | a {b: color()} + | ^^^^^^^ invocation + ' + ,--> sass:color +1 | @function color($description) { + | =================== declaration + ' + input.scss 1:7 root stylesheet + +<===> +================================================================================ +<===> too_many_args/input.scss +a {b: color(srgb 0.1 0.2 0.3 0.4)} + +<===> too_many_args/error +Error: $description: The srgb color space has 3 channels but (srgb 0.1 0.2 0.3 0.4) has 4. + , +1 | a {b: color(srgb 0.1 0.2 0.3 0.4)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 1:7 root stylesheet + +<===> +================================================================================ +<===> unknown_space/input.scss +a {b: color(foo 1 2 3)} + +<===> unknown_space/error +Error: $description: Unknown color space "foo". + , +1 | a {b: color(foo 1 2 3)} + | ^^^^^^^^^^^^^^^^ + ' + input.scss 1:7 root stylesheet diff --git a/spec/core_functions/color/color/no_alpha.hrx b/spec/core_functions/color/color/no_alpha.hrx new file mode 100644 index 000000000..218077126 --- /dev/null +++ b/spec/core_functions/color/color/no_alpha.hrx @@ -0,0 +1,69 @@ +<===> none/red/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(srgb none 0.2 0.3)); + +<===> none/red/output.css +a { + value: color(srgb none 0.2 0.3); + channels: none 0.2 0.3 / 1; +} + +<===> +================================================================================ +<===> none/green/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(srgb 0.1 none 0.3)); + +<===> none/green/output.css +a { + value: color(srgb 0.1 none 0.3); + channels: 0.1 none 0.3 / 1; +} + +<===> +================================================================================ +<===> none/blue/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(srgb 0.1 none 0.3)); + +<===> none/blue/output.css +a { + value: color(srgb 0.1 none 0.3); + channels: 0.1 none 0.3 / 1; +} + +<===> +================================================================================ +<===> case/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(sRGB 0.1 none 0.3)); + +<===> case/output.css +a { + value: color(srgb 0.1 none 0.3); + channels: 0.1 none 0.3 / 1; +} + +<===> +================================================================================ +<===> relative_color/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(from #aaa srgb r g b)); + +<===> relative_color/output.css +a { + value: color(from #aaa srgb r g b); + type: string; +} + +<===> +================================================================================ +<===> named/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color($description: srgb 0.1 0.2 0.3)); + +<===> named/output.css +a { + value: color(srgb 0.1 0.2 0.3); + channels: 0.1 0.2 0.3 / 1; +} diff --git a/spec/core_functions/color/color/options.yml b/spec/core_functions/color/color/options.yml new file mode 100644 index 000000000..99ecec7ed --- /dev/null +++ b/spec/core_functions/color/color/options.yml @@ -0,0 +1,3 @@ +--- +:ignore_for: +- libsass diff --git a/spec/core_functions/color/color/spaces/a98_rgb.hrx b/spec/core_functions/color/color/spaces/a98_rgb.hrx new file mode 100644 index 000000000..2c073216f --- /dev/null +++ b/spec/core_functions/color/color/spaces/a98_rgb.hrx @@ -0,0 +1,165 @@ +<===> unitless/in_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(a98-rgb 0.1 0.2 0.3)); + +<===> unitless/in_range/output.css +a { + value: color(a98-rgb 0.1 0.2 0.3); + channels: 0.1 0.2 0.3 / 1; +} + +<===> +================================================================================ +<===> unitless/red/above_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(a98-rgb 1.1 0.2 0.3)); + +<===> unitless/red/above_range/output.css +a { + value: color(a98-rgb 1.1 0.2 0.3); + channels: 1.1 0.2 0.3 / 1; +} + +<===> +================================================================================ +<===> unitless/red/below_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(a98-rgb -0.1 0.2 0.3)); + +<===> unitless/red/below_range/output.css +a { + value: color(a98-rgb -0.1 0.2 0.3); + channels: -0.1 0.2 0.3 / 1; +} + +<===> +================================================================================ +<===> unitless/green/above_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(a98-rgb 0.1 1.2 0.3)); + +<===> unitless/green/above_range/output.css +a { + value: color(a98-rgb 0.1 1.2 0.3); + channels: 0.1 1.2 0.3 / 1; +} + +<===> +================================================================================ +<===> unitless/green/below_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(a98-rgb 0.1 -0.2 0.3)); + +<===> unitless/green/below_range/output.css +a { + value: color(a98-rgb 0.1 -0.2 0.3); + channels: 0.1 -0.2 0.3 / 1; +} + +<===> +================================================================================ +<===> unitless/blue/above_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(a98-rgb 0.1 0.2 1.3)); + +<===> unitless/blue/above_range/output.css +a { + value: color(a98-rgb 0.1 0.2 1.3); + channels: 0.1 0.2 1.3 / 1; +} + +<===> +================================================================================ +<===> unitless/blue/below_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(a98-rgb 0.1 0.2 -0.3)); + +<===> unitless/blue/below_range/output.css +a { + value: color(a98-rgb 0.1 0.2 -0.3); + channels: 0.1 0.2 -0.3 / 1; +} + +<===> +================================================================================ +<===> percent/in_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(a98-rgb 10% 20% 30%)); + +<===> percent/in_range/output.css +a { + value: color(a98-rgb 0.1 0.2 0.3); + channels: 0.1 0.2 0.3 / 1; +} + +<===> +================================================================================ +<===> percent/red/above_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(a98-rgb 110% 0.2 0.3)); + +<===> percent/red/above_range/output.css +a { + value: color(a98-rgb 1.1 0.2 0.3); + channels: 1.1 0.2 0.3 / 1; +} + +<===> +================================================================================ +<===> percent/red/below_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(a98-rgb -10% 0.2 0.3)); + +<===> percent/red/below_range/output.css +a { + value: color(a98-rgb -0.1 0.2 0.3); + channels: -0.1 0.2 0.3 / 1; +} + +<===> +================================================================================ +<===> percent/green/above_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(a98-rgb 0.1 120% 0.3)); + +<===> percent/green/above_range/output.css +a { + value: color(a98-rgb 0.1 1.2 0.3); + channels: 0.1 1.2 0.3 / 1; +} + +<===> +================================================================================ +<===> percent/green/below_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(a98-rgb 0.1 -20% 0.3)); + +<===> percent/green/below_range/output.css +a { + value: color(a98-rgb 0.1 -0.2 0.3); + channels: 0.1 -0.2 0.3 / 1; +} + +<===> +================================================================================ +<===> percent/blue/above_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(a98-rgb 0.1 0.2 130%)); + +<===> percent/blue/above_range/output.css +a { + value: color(a98-rgb 0.1 0.2 1.3); + channels: 0.1 0.2 1.3 / 1; +} + +<===> +================================================================================ +<===> percent/blue/below_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(a98-rgb 0.1 0.2 -30%)); + +<===> percent/blue/below_range/output.css +a { + value: color(a98-rgb 0.1 0.2 -0.3); + channels: 0.1 0.2 -0.3 / 1; +} diff --git a/spec/core_functions/color/color/spaces/display_p3.hrx b/spec/core_functions/color/color/spaces/display_p3.hrx new file mode 100644 index 000000000..a7ae00505 --- /dev/null +++ b/spec/core_functions/color/color/spaces/display_p3.hrx @@ -0,0 +1,165 @@ +<===> unitless/in_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(display-p3 0.1 0.2 0.3)); + +<===> unitless/in_range/output.css +a { + value: color(display-p3 0.1 0.2 0.3); + channels: 0.1 0.2 0.3 / 1; +} + +<===> +================================================================================ +<===> unitless/red/above_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(display-p3 1.1 0.2 0.3)); + +<===> unitless/red/above_range/output.css +a { + value: color(display-p3 1.1 0.2 0.3); + channels: 1.1 0.2 0.3 / 1; +} + +<===> +================================================================================ +<===> unitless/red/below_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(display-p3 -0.1 0.2 0.3)); + +<===> unitless/red/below_range/output.css +a { + value: color(display-p3 -0.1 0.2 0.3); + channels: -0.1 0.2 0.3 / 1; +} + +<===> +================================================================================ +<===> unitless/green/above_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(display-p3 0.1 1.2 0.3)); + +<===> unitless/green/above_range/output.css +a { + value: color(display-p3 0.1 1.2 0.3); + channels: 0.1 1.2 0.3 / 1; +} + +<===> +================================================================================ +<===> unitless/green/below_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(display-p3 0.1 -0.2 0.3)); + +<===> unitless/green/below_range/output.css +a { + value: color(display-p3 0.1 -0.2 0.3); + channels: 0.1 -0.2 0.3 / 1; +} + +<===> +================================================================================ +<===> unitless/blue/above_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(display-p3 0.1 0.2 1.3)); + +<===> unitless/blue/above_range/output.css +a { + value: color(display-p3 0.1 0.2 1.3); + channels: 0.1 0.2 1.3 / 1; +} + +<===> +================================================================================ +<===> unitless/blue/below_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(display-p3 0.1 0.2 -0.3)); + +<===> unitless/blue/below_range/output.css +a { + value: color(display-p3 0.1 0.2 -0.3); + channels: 0.1 0.2 -0.3 / 1; +} + +<===> +================================================================================ +<===> percent/in_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(display-p3 10% 20% 30%)); + +<===> percent/in_range/output.css +a { + value: color(display-p3 0.1 0.2 0.3); + channels: 0.1 0.2 0.3 / 1; +} + +<===> +================================================================================ +<===> percent/red/above_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(display-p3 110% 0.2 0.3)); + +<===> percent/red/above_range/output.css +a { + value: color(display-p3 1.1 0.2 0.3); + channels: 1.1 0.2 0.3 / 1; +} + +<===> +================================================================================ +<===> percent/red/below_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(display-p3 -10% 0.2 0.3)); + +<===> percent/red/below_range/output.css +a { + value: color(display-p3 -0.1 0.2 0.3); + channels: -0.1 0.2 0.3 / 1; +} + +<===> +================================================================================ +<===> percent/green/above_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(display-p3 0.1 120% 0.3)); + +<===> percent/green/above_range/output.css +a { + value: color(display-p3 0.1 1.2 0.3); + channels: 0.1 1.2 0.3 / 1; +} + +<===> +================================================================================ +<===> percent/green/below_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(display-p3 0.1 -20% 0.3)); + +<===> percent/green/below_range/output.css +a { + value: color(display-p3 0.1 -0.2 0.3); + channels: 0.1 -0.2 0.3 / 1; +} + +<===> +================================================================================ +<===> percent/blue/above_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(display-p3 0.1 0.2 130%)); + +<===> percent/blue/above_range/output.css +a { + value: color(display-p3 0.1 0.2 1.3); + channels: 0.1 0.2 1.3 / 1; +} + +<===> +================================================================================ +<===> percent/blue/below_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(display-p3 0.1 0.2 -30%)); + +<===> percent/blue/below_range/output.css +a { + value: color(display-p3 0.1 0.2 -0.3); + channels: 0.1 0.2 -0.3 / 1; +} diff --git a/spec/core_functions/color/color/spaces/prophoto_rgb.hrx b/spec/core_functions/color/color/spaces/prophoto_rgb.hrx new file mode 100644 index 000000000..080f28eb0 --- /dev/null +++ b/spec/core_functions/color/color/spaces/prophoto_rgb.hrx @@ -0,0 +1,165 @@ +<===> unitless/in_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(prophoto-rgb 0.1 0.2 0.3)); + +<===> unitless/in_range/output.css +a { + value: color(prophoto-rgb 0.1 0.2 0.3); + channels: 0.1 0.2 0.3 / 1; +} + +<===> +================================================================================ +<===> unitless/red/above_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(prophoto-rgb 1.1 0.2 0.3)); + +<===> unitless/red/above_range/output.css +a { + value: color(prophoto-rgb 1.1 0.2 0.3); + channels: 1.1 0.2 0.3 / 1; +} + +<===> +================================================================================ +<===> unitless/red/below_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(prophoto-rgb -0.1 0.2 0.3)); + +<===> unitless/red/below_range/output.css +a { + value: color(prophoto-rgb -0.1 0.2 0.3); + channels: -0.1 0.2 0.3 / 1; +} + +<===> +================================================================================ +<===> unitless/green/above_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(prophoto-rgb 0.1 1.2 0.3)); + +<===> unitless/green/above_range/output.css +a { + value: color(prophoto-rgb 0.1 1.2 0.3); + channels: 0.1 1.2 0.3 / 1; +} + +<===> +================================================================================ +<===> unitless/green/below_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(prophoto-rgb 0.1 -0.2 0.3)); + +<===> unitless/green/below_range/output.css +a { + value: color(prophoto-rgb 0.1 -0.2 0.3); + channels: 0.1 -0.2 0.3 / 1; +} + +<===> +================================================================================ +<===> unitless/blue/above_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(prophoto-rgb 0.1 0.2 1.3)); + +<===> unitless/blue/above_range/output.css +a { + value: color(prophoto-rgb 0.1 0.2 1.3); + channels: 0.1 0.2 1.3 / 1; +} + +<===> +================================================================================ +<===> unitless/blue/below_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(prophoto-rgb 0.1 0.2 -0.3)); + +<===> unitless/blue/below_range/output.css +a { + value: color(prophoto-rgb 0.1 0.2 -0.3); + channels: 0.1 0.2 -0.3 / 1; +} + +<===> +================================================================================ +<===> percent/in_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(prophoto-rgb 10% 20% 30%)); + +<===> percent/in_range/output.css +a { + value: color(prophoto-rgb 0.1 0.2 0.3); + channels: 0.1 0.2 0.3 / 1; +} + +<===> +================================================================================ +<===> percent/red/above_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(prophoto-rgb 110% 0.2 0.3)); + +<===> percent/red/above_range/output.css +a { + value: color(prophoto-rgb 1.1 0.2 0.3); + channels: 1.1 0.2 0.3 / 1; +} + +<===> +================================================================================ +<===> percent/red/below_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(prophoto-rgb -10% 0.2 0.3)); + +<===> percent/red/below_range/output.css +a { + value: color(prophoto-rgb -0.1 0.2 0.3); + channels: -0.1 0.2 0.3 / 1; +} + +<===> +================================================================================ +<===> percent/green/above_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(prophoto-rgb 0.1 120% 0.3)); + +<===> percent/green/above_range/output.css +a { + value: color(prophoto-rgb 0.1 1.2 0.3); + channels: 0.1 1.2 0.3 / 1; +} + +<===> +================================================================================ +<===> percent/green/below_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(prophoto-rgb 0.1 -20% 0.3)); + +<===> percent/green/below_range/output.css +a { + value: color(prophoto-rgb 0.1 -0.2 0.3); + channels: 0.1 -0.2 0.3 / 1; +} + +<===> +================================================================================ +<===> percent/blue/above_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(prophoto-rgb 0.1 0.2 130%)); + +<===> percent/blue/above_range/output.css +a { + value: color(prophoto-rgb 0.1 0.2 1.3); + channels: 0.1 0.2 1.3 / 1; +} + +<===> +================================================================================ +<===> percent/blue/below_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(prophoto-rgb 0.1 0.2 -30%)); + +<===> percent/blue/below_range/output.css +a { + value: color(prophoto-rgb 0.1 0.2 -0.3); + channels: 0.1 0.2 -0.3 / 1; +} diff --git a/spec/core_functions/color/color/spaces/rec2020.hrx b/spec/core_functions/color/color/spaces/rec2020.hrx new file mode 100644 index 000000000..c5df2d5f1 --- /dev/null +++ b/spec/core_functions/color/color/spaces/rec2020.hrx @@ -0,0 +1,165 @@ +<===> unitless/in_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(rec2020 0.1 0.2 0.3)); + +<===> unitless/in_range/output.css +a { + value: color(rec2020 0.1 0.2 0.3); + channels: 0.1 0.2 0.3 / 1; +} + +<===> +================================================================================ +<===> unitless/red/above_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(rec2020 1.1 0.2 0.3)); + +<===> unitless/red/above_range/output.css +a { + value: color(rec2020 1.1 0.2 0.3); + channels: 1.1 0.2 0.3 / 1; +} + +<===> +================================================================================ +<===> unitless/red/below_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(rec2020 -0.1 0.2 0.3)); + +<===> unitless/red/below_range/output.css +a { + value: color(rec2020 -0.1 0.2 0.3); + channels: -0.1 0.2 0.3 / 1; +} + +<===> +================================================================================ +<===> unitless/green/above_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(rec2020 0.1 1.2 0.3)); + +<===> unitless/green/above_range/output.css +a { + value: color(rec2020 0.1 1.2 0.3); + channels: 0.1 1.2 0.3 / 1; +} + +<===> +================================================================================ +<===> unitless/green/below_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(rec2020 0.1 -0.2 0.3)); + +<===> unitless/green/below_range/output.css +a { + value: color(rec2020 0.1 -0.2 0.3); + channels: 0.1 -0.2 0.3 / 1; +} + +<===> +================================================================================ +<===> unitless/blue/above_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(rec2020 0.1 0.2 1.3)); + +<===> unitless/blue/above_range/output.css +a { + value: color(rec2020 0.1 0.2 1.3); + channels: 0.1 0.2 1.3 / 1; +} + +<===> +================================================================================ +<===> unitless/blue/below_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(rec2020 0.1 0.2 -0.3)); + +<===> unitless/blue/below_range/output.css +a { + value: color(rec2020 0.1 0.2 -0.3); + channels: 0.1 0.2 -0.3 / 1; +} + +<===> +================================================================================ +<===> percent/in_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(rec2020 10% 20% 30%)); + +<===> percent/in_range/output.css +a { + value: color(rec2020 0.1 0.2 0.3); + channels: 0.1 0.2 0.3 / 1; +} + +<===> +================================================================================ +<===> percent/red/above_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(rec2020 110% 0.2 0.3)); + +<===> percent/red/above_range/output.css +a { + value: color(rec2020 1.1 0.2 0.3); + channels: 1.1 0.2 0.3 / 1; +} + +<===> +================================================================================ +<===> percent/red/below_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(rec2020 -10% 0.2 0.3)); + +<===> percent/red/below_range/output.css +a { + value: color(rec2020 -0.1 0.2 0.3); + channels: -0.1 0.2 0.3 / 1; +} + +<===> +================================================================================ +<===> percent/green/above_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(rec2020 0.1 120% 0.3)); + +<===> percent/green/above_range/output.css +a { + value: color(rec2020 0.1 1.2 0.3); + channels: 0.1 1.2 0.3 / 1; +} + +<===> +================================================================================ +<===> percent/green/below_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(rec2020 0.1 -20% 0.3)); + +<===> percent/green/below_range/output.css +a { + value: color(rec2020 0.1 -0.2 0.3); + channels: 0.1 -0.2 0.3 / 1; +} + +<===> +================================================================================ +<===> percent/blue/above_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(rec2020 0.1 0.2 130%)); + +<===> percent/blue/above_range/output.css +a { + value: color(rec2020 0.1 0.2 1.3); + channels: 0.1 0.2 1.3 / 1; +} + +<===> +================================================================================ +<===> percent/blue/below_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(rec2020 0.1 0.2 -30%)); + +<===> percent/blue/below_range/output.css +a { + value: color(rec2020 0.1 0.2 -0.3); + channels: 0.1 0.2 -0.3 / 1; +} diff --git a/spec/core_functions/color/color/spaces/srgb.hrx b/spec/core_functions/color/color/spaces/srgb.hrx new file mode 100644 index 000000000..6f3ac5d2e --- /dev/null +++ b/spec/core_functions/color/color/spaces/srgb.hrx @@ -0,0 +1,165 @@ +<===> unitless/in_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(srgb 0.1 0.2 0.3)); + +<===> unitless/in_range/output.css +a { + value: color(srgb 0.1 0.2 0.3); + channels: 0.1 0.2 0.3 / 1; +} + +<===> +================================================================================ +<===> unitless/red/above_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(srgb 1.1 0.2 0.3)); + +<===> unitless/red/above_range/output.css +a { + value: color(srgb 1.1 0.2 0.3); + channels: 1.1 0.2 0.3 / 1; +} + +<===> +================================================================================ +<===> unitless/red/below_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(srgb -0.1 0.2 0.3)); + +<===> unitless/red/below_range/output.css +a { + value: color(srgb -0.1 0.2 0.3); + channels: -0.1 0.2 0.3 / 1; +} + +<===> +================================================================================ +<===> unitless/green/above_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(srgb 0.1 1.2 0.3)); + +<===> unitless/green/above_range/output.css +a { + value: color(srgb 0.1 1.2 0.3); + channels: 0.1 1.2 0.3 / 1; +} + +<===> +================================================================================ +<===> unitless/green/below_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(srgb 0.1 -0.2 0.3)); + +<===> unitless/green/below_range/output.css +a { + value: color(srgb 0.1 -0.2 0.3); + channels: 0.1 -0.2 0.3 / 1; +} + +<===> +================================================================================ +<===> unitless/blue/above_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(srgb 0.1 0.2 1.3)); + +<===> unitless/blue/above_range/output.css +a { + value: color(srgb 0.1 0.2 1.3); + channels: 0.1 0.2 1.3 / 1; +} + +<===> +================================================================================ +<===> unitless/blue/below_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(srgb 0.1 0.2 -0.3)); + +<===> unitless/blue/below_range/output.css +a { + value: color(srgb 0.1 0.2 -0.3); + channels: 0.1 0.2 -0.3 / 1; +} + +<===> +================================================================================ +<===> percent/in_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(srgb 10% 20% 30%)); + +<===> percent/in_range/output.css +a { + value: color(srgb 0.1 0.2 0.3); + channels: 0.1 0.2 0.3 / 1; +} + +<===> +================================================================================ +<===> percent/red/above_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(srgb 110% 0.2 0.3)); + +<===> percent/red/above_range/output.css +a { + value: color(srgb 1.1 0.2 0.3); + channels: 1.1 0.2 0.3 / 1; +} + +<===> +================================================================================ +<===> percent/red/below_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(srgb -10% 0.2 0.3)); + +<===> percent/red/below_range/output.css +a { + value: color(srgb -0.1 0.2 0.3); + channels: -0.1 0.2 0.3 / 1; +} + +<===> +================================================================================ +<===> percent/green/above_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(srgb 0.1 120% 0.3)); + +<===> percent/green/above_range/output.css +a { + value: color(srgb 0.1 1.2 0.3); + channels: 0.1 1.2 0.3 / 1; +} + +<===> +================================================================================ +<===> percent/green/below_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(srgb 0.1 -20% 0.3)); + +<===> percent/green/below_range/output.css +a { + value: color(srgb 0.1 -0.2 0.3); + channels: 0.1 -0.2 0.3 / 1; +} + +<===> +================================================================================ +<===> percent/blue/above_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(srgb 0.1 0.2 130%)); + +<===> percent/blue/above_range/output.css +a { + value: color(srgb 0.1 0.2 1.3); + channels: 0.1 0.2 1.3 / 1; +} + +<===> +================================================================================ +<===> percent/blue/below_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(srgb 0.1 0.2 -30%)); + +<===> percent/blue/below_range/output.css +a { + value: color(srgb 0.1 0.2 -0.3); + channels: 0.1 0.2 -0.3 / 1; +} diff --git a/spec/core_functions/color/color/spaces/srgb_linear.hrx b/spec/core_functions/color/color/spaces/srgb_linear.hrx new file mode 100644 index 000000000..9bb3cea1c --- /dev/null +++ b/spec/core_functions/color/color/spaces/srgb_linear.hrx @@ -0,0 +1,165 @@ +<===> unitless/in_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(srgb-linear 0.1 0.2 0.3)); + +<===> unitless/in_range/output.css +a { + value: color(srgb-linear 0.1 0.2 0.3); + channels: 0.1 0.2 0.3 / 1; +} + +<===> +================================================================================ +<===> unitless/red/above_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(srgb-linear 1.1 0.2 0.3)); + +<===> unitless/red/above_range/output.css +a { + value: color(srgb-linear 1.1 0.2 0.3); + channels: 1.1 0.2 0.3 / 1; +} + +<===> +================================================================================ +<===> unitless/red/below_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(srgb-linear -0.1 0.2 0.3)); + +<===> unitless/red/below_range/output.css +a { + value: color(srgb-linear -0.1 0.2 0.3); + channels: -0.1 0.2 0.3 / 1; +} + +<===> +================================================================================ +<===> unitless/green/above_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(srgb-linear 0.1 1.2 0.3)); + +<===> unitless/green/above_range/output.css +a { + value: color(srgb-linear 0.1 1.2 0.3); + channels: 0.1 1.2 0.3 / 1; +} + +<===> +================================================================================ +<===> unitless/green/below_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(srgb-linear 0.1 -0.2 0.3)); + +<===> unitless/green/below_range/output.css +a { + value: color(srgb-linear 0.1 -0.2 0.3); + channels: 0.1 -0.2 0.3 / 1; +} + +<===> +================================================================================ +<===> unitless/blue/above_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(srgb-linear 0.1 0.2 1.3)); + +<===> unitless/blue/above_range/output.css +a { + value: color(srgb-linear 0.1 0.2 1.3); + channels: 0.1 0.2 1.3 / 1; +} + +<===> +================================================================================ +<===> unitless/blue/below_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(srgb-linear 0.1 0.2 -0.3)); + +<===> unitless/blue/below_range/output.css +a { + value: color(srgb-linear 0.1 0.2 -0.3); + channels: 0.1 0.2 -0.3 / 1; +} + +<===> +================================================================================ +<===> percent/in_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(srgb-linear 10% 20% 30%)); + +<===> percent/in_range/output.css +a { + value: color(srgb-linear 0.1 0.2 0.3); + channels: 0.1 0.2 0.3 / 1; +} + +<===> +================================================================================ +<===> percent/red/above_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(srgb-linear 110% 0.2 0.3)); + +<===> percent/red/above_range/output.css +a { + value: color(srgb-linear 1.1 0.2 0.3); + channels: 1.1 0.2 0.3 / 1; +} + +<===> +================================================================================ +<===> percent/red/below_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(srgb-linear -10% 0.2 0.3)); + +<===> percent/red/below_range/output.css +a { + value: color(srgb-linear -0.1 0.2 0.3); + channels: -0.1 0.2 0.3 / 1; +} + +<===> +================================================================================ +<===> percent/green/above_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(srgb-linear 0.1 120% 0.3)); + +<===> percent/green/above_range/output.css +a { + value: color(srgb-linear 0.1 1.2 0.3); + channels: 0.1 1.2 0.3 / 1; +} + +<===> +================================================================================ +<===> percent/green/below_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(srgb-linear 0.1 -20% 0.3)); + +<===> percent/green/below_range/output.css +a { + value: color(srgb-linear 0.1 -0.2 0.3); + channels: 0.1 -0.2 0.3 / 1; +} + +<===> +================================================================================ +<===> percent/blue/above_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(srgb-linear 0.1 0.2 130%)); + +<===> percent/blue/above_range/output.css +a { + value: color(srgb-linear 0.1 0.2 1.3); + channels: 0.1 0.2 1.3 / 1; +} + +<===> +================================================================================ +<===> percent/blue/below_range/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(srgb-linear 0.1 0.2 -30%)); + +<===> percent/blue/below_range/output.css +a { + value: color(srgb-linear 0.1 0.2 -0.3); + channels: 0.1 0.2 -0.3 / 1; +} diff --git a/spec/core_functions/color/color/spaces/xyz.hrx b/spec/core_functions/color/color/spaces/xyz.hrx new file mode 100644 index 000000000..8970c4532 --- /dev/null +++ b/spec/core_functions/color/color/spaces/xyz.hrx @@ -0,0 +1,177 @@ +<===> unitless/in_range/input.scss +@use 'core_functions/color/color/xyz-utils'; +@include xyz-utils.inspect(color(xyz 0.1 0.2 0.3)); + +<===> unitless/in_range/output.css +a { + value: color(xyz 0.1 0.2 0.3); + channels: 0.1 0.2 0.3 / 1; +} + +<===> +================================================================================ +<===> unitless/x/above_range/input.scss +@use 'core_functions/color/color/xyz-utils'; +@include xyz-utils.inspect(color(xyz 1.1 0.2 0.3)); + +<===> unitless/x/above_range/output.css +a { + value: color(xyz 1.1 0.2 0.3); + channels: 1.1 0.2 0.3 / 1; +} + +<===> +================================================================================ +<===> unitless/x/below_range/input.scss +@use 'core_functions/color/color/xyz-utils'; +@include xyz-utils.inspect(color(xyz -0.1 0.2 0.3)); + +<===> unitless/x/below_range/output.css +a { + value: color(xyz -0.1 0.2 0.3); + channels: -0.1 0.2 0.3 / 1; +} + +<===> +================================================================================ +<===> unitless/y/above_range/input.scss +@use 'core_functions/color/color/xyz-utils'; +@include xyz-utils.inspect(color(xyz 0.1 1.2 0.3)); + +<===> unitless/y/above_range/output.css +a { + value: color(xyz 0.1 1.2 0.3); + channels: 0.1 1.2 0.3 / 1; +} + +<===> +================================================================================ +<===> unitless/y/below_range/input.scss +@use 'core_functions/color/color/xyz-utils'; +@include xyz-utils.inspect(color(xyz 0.1 -0.2 0.3)); + +<===> unitless/y/below_range/output.css +a { + value: color(xyz 0.1 -0.2 0.3); + channels: 0.1 -0.2 0.3 / 1; +} + +<===> +================================================================================ +<===> unitless/z/above_range/input.scss +@use 'core_functions/color/color/xyz-utils'; +@include xyz-utils.inspect(color(xyz 0.1 0.2 1.3)); + +<===> unitless/z/above_range/output.css +a { + value: color(xyz 0.1 0.2 1.3); + channels: 0.1 0.2 1.3 / 1; +} + +<===> +================================================================================ +<===> unitless/z/below_range/input.scss +@use 'core_functions/color/color/xyz-utils'; +@include xyz-utils.inspect(color(xyz 0.1 0.2 -0.3)); + +<===> unitless/z/below_range/output.css +a { + value: color(xyz 0.1 0.2 -0.3); + channels: 0.1 0.2 -0.3 / 1; +} + +<===> +================================================================================ +<===> percent/in_range/input.scss +@use 'core_functions/color/color/xyz-utils'; +@include xyz-utils.inspect(color(xyz 10% 20% 30%)); + +<===> percent/in_range/output.css +a { + value: color(xyz 0.1 0.2 0.3); + channels: 0.1 0.2 0.3 / 1; +} + +<===> +================================================================================ +<===> percent/x/above_range/input.scss +@use 'core_functions/color/color/xyz-utils'; +@include xyz-utils.inspect(color(xyz 110% 0.2 0.3)); + +<===> percent/x/above_range/output.css +a { + value: color(xyz 1.1 0.2 0.3); + channels: 1.1 0.2 0.3 / 1; +} + +<===> +================================================================================ +<===> percent/x/below_range/input.scss +@use 'core_functions/color/color/xyz-utils'; +@include xyz-utils.inspect(color(xyz -10% 0.2 0.3)); + +<===> percent/x/below_range/output.css +a { + value: color(xyz -0.1 0.2 0.3); + channels: -0.1 0.2 0.3 / 1; +} + +<===> +================================================================================ +<===> percent/y/above_range/input.scss +@use 'core_functions/color/color/xyz-utils'; +@include xyz-utils.inspect(color(xyz 0.1 120% 0.3)); + +<===> percent/y/above_range/output.css +a { + value: color(xyz 0.1 1.2 0.3); + channels: 0.1 1.2 0.3 / 1; +} + +<===> +================================================================================ +<===> percent/y/below_range/input.scss +@use 'core_functions/color/color/xyz-utils'; +@include xyz-utils.inspect(color(xyz 0.1 -20% 0.3)); + +<===> percent/y/below_range/output.css +a { + value: color(xyz 0.1 -0.2 0.3); + channels: 0.1 -0.2 0.3 / 1; +} + +<===> +================================================================================ +<===> percent/z/above_range/input.scss +@use 'core_functions/color/color/xyz-utils'; +@include xyz-utils.inspect(color(xyz 0.1 0.2 130%)); + +<===> percent/z/above_range/output.css +a { + value: color(xyz 0.1 0.2 1.3); + channels: 0.1 0.2 1.3 / 1; +} + +<===> +================================================================================ +<===> percent/z/below_range/input.scss +@use 'core_functions/color/color/xyz-utils'; +@include xyz-utils.inspect(color(xyz 0.1 0.2 -30%)); + +<===> percent/z/below_range/output.css +a { + value: color(xyz 0.1 0.2 -0.3); + channels: 0.1 0.2 -0.3 / 1; +} + +<===> +================================================================================ +<===> xyz_d65/input.scss +@use 'core_functions/color/color/xyz-utils'; +@include xyz-utils.inspect(color(xyz-d65 0.1 0.2 0.3)); + +<===> xyz_d65/output.css +a { + value: color(xyz 0.1 0.2 0.3); + channels: 0.1 0.2 0.3 / 1; +} diff --git a/spec/core_functions/color/color/spaces/xyz_d50.hrx b/spec/core_functions/color/color/spaces/xyz_d50.hrx new file mode 100644 index 000000000..f836ab16f --- /dev/null +++ b/spec/core_functions/color/color/spaces/xyz_d50.hrx @@ -0,0 +1,165 @@ +<===> unitless/in_range/input.scss +@use 'core_functions/color/color/xyz-utils'; +@include xyz-utils.inspect(color(xyz-d50 0.1 0.2 0.3)); + +<===> unitless/in_range/output.css +a { + value: color(xyz-d50 0.1 0.2 0.3); + channels: 0.1 0.2 0.3 / 1; +} + +<===> +================================================================================ +<===> unitless/x/above_range/input.scss +@use 'core_functions/color/color/xyz-utils'; +@include xyz-utils.inspect(color(xyz-d50 1.1 0.2 0.3)); + +<===> unitless/x/above_range/output.css +a { + value: color(xyz-d50 1.1 0.2 0.3); + channels: 1.1 0.2 0.3 / 1; +} + +<===> +================================================================================ +<===> unitless/x/below_range/input.scss +@use 'core_functions/color/color/xyz-utils'; +@include xyz-utils.inspect(color(xyz-d50 -0.1 0.2 0.3)); + +<===> unitless/x/below_range/output.css +a { + value: color(xyz-d50 -0.1 0.2 0.3); + channels: -0.1 0.2 0.3 / 1; +} + +<===> +================================================================================ +<===> unitless/y/above_range/input.scss +@use 'core_functions/color/color/xyz-utils'; +@include xyz-utils.inspect(color(xyz-d50 0.1 1.2 0.3)); + +<===> unitless/y/above_range/output.css +a { + value: color(xyz-d50 0.1 1.2 0.3); + channels: 0.1 1.2 0.3 / 1; +} + +<===> +================================================================================ +<===> unitless/y/below_range/input.scss +@use 'core_functions/color/color/xyz-utils'; +@include xyz-utils.inspect(color(xyz-d50 0.1 -0.2 0.3)); + +<===> unitless/y/below_range/output.css +a { + value: color(xyz-d50 0.1 -0.2 0.3); + channels: 0.1 -0.2 0.3 / 1; +} + +<===> +================================================================================ +<===> unitless/z/above_range/input.scss +@use 'core_functions/color/color/xyz-utils'; +@include xyz-utils.inspect(color(xyz-d50 0.1 0.2 1.3)); + +<===> unitless/z/above_range/output.css +a { + value: color(xyz-d50 0.1 0.2 1.3); + channels: 0.1 0.2 1.3 / 1; +} + +<===> +================================================================================ +<===> unitless/z/below_range/input.scss +@use 'core_functions/color/color/xyz-utils'; +@include xyz-utils.inspect(color(xyz-d50 0.1 0.2 -0.3)); + +<===> unitless/z/below_range/output.css +a { + value: color(xyz-d50 0.1 0.2 -0.3); + channels: 0.1 0.2 -0.3 / 1; +} + +<===> +================================================================================ +<===> percent/in_range/input.scss +@use 'core_functions/color/color/xyz-utils'; +@include xyz-utils.inspect(color(xyz-d50 10% 20% 30%)); + +<===> percent/in_range/output.css +a { + value: color(xyz-d50 0.1 0.2 0.3); + channels: 0.1 0.2 0.3 / 1; +} + +<===> +================================================================================ +<===> percent/x/above_range/input.scss +@use 'core_functions/color/color/xyz-utils'; +@include xyz-utils.inspect(color(xyz-d50 110% 0.2 0.3)); + +<===> percent/x/above_range/output.css +a { + value: color(xyz-d50 1.1 0.2 0.3); + channels: 1.1 0.2 0.3 / 1; +} + +<===> +================================================================================ +<===> percent/x/below_range/input.scss +@use 'core_functions/color/color/xyz-utils'; +@include xyz-utils.inspect(color(xyz-d50 -10% 0.2 0.3)); + +<===> percent/x/below_range/output.css +a { + value: color(xyz-d50 -0.1 0.2 0.3); + channels: -0.1 0.2 0.3 / 1; +} + +<===> +================================================================================ +<===> percent/y/above_range/input.scss +@use 'core_functions/color/color/xyz-utils'; +@include xyz-utils.inspect(color(xyz-d50 0.1 120% 0.3)); + +<===> percent/y/above_range/output.css +a { + value: color(xyz-d50 0.1 1.2 0.3); + channels: 0.1 1.2 0.3 / 1; +} + +<===> +================================================================================ +<===> percent/y/below_range/input.scss +@use 'core_functions/color/color/xyz-utils'; +@include xyz-utils.inspect(color(xyz-d50 0.1 -20% 0.3)); + +<===> percent/y/below_range/output.css +a { + value: color(xyz-d50 0.1 -0.2 0.3); + channels: 0.1 -0.2 0.3 / 1; +} + +<===> +================================================================================ +<===> percent/z/above_range/input.scss +@use 'core_functions/color/color/xyz-utils'; +@include xyz-utils.inspect(color(xyz-d50 0.1 0.2 130%)); + +<===> percent/z/above_range/output.css +a { + value: color(xyz-d50 0.1 0.2 1.3); + channels: 0.1 0.2 1.3 / 1; +} + +<===> +================================================================================ +<===> percent/z/below_range/input.scss +@use 'core_functions/color/color/xyz-utils'; +@include xyz-utils.inspect(color(xyz-d50 0.1 0.2 -30%)); + +<===> percent/z/below_range/output.css +a { + value: color(xyz-d50 0.1 0.2 -0.3); + channels: 0.1 0.2 -0.3 / 1; +} diff --git a/spec/core_functions/color/color/special_functions.hrx b/spec/core_functions/color/color/special_functions.hrx new file mode 100644 index 000000000..c93bb051e --- /dev/null +++ b/spec/core_functions/color/color/special_functions.hrx @@ -0,0 +1,142 @@ +<===> calculation/arg_1/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(srgb calc(1px + 1%) 0.2 0.3)); + +<===> calculation/arg_1/output.css +a { + value: color(srgb calc(1px + 1%) 0.2 0.3); + type: string; +} + +<===> +================================================================================ +<===> calculation/arg_2/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(srgb 0.1 calc(1px + 1%) 0.3)); + +<===> calculation/arg_2/output.css +a { + value: color(srgb 0.1 calc(1px + 1%) 0.3); + type: string; +} + +<===> +================================================================================ +<===> calculation/arg_3/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(srgb 0.1 0.2 calc(1px + 1%))); + +<===> calculation/arg_3/output.css +a { + value: color(srgb 0.1 0.2 calc(1px + 1%)); + type: string; +} + +<===> +================================================================================ +<===> calculation/arg_4/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(srgb 0.1 0.2 0.3 / calc(1px + 1%))); + +<===> calculation/arg_4/output.css +a { + value: color(srgb 0.1 0.2 0.3/calc(1px + 1%)); + type: string; +} + +<===> +================================================================================ +<===> var/arg_1/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(srgb var(--foo) 0.2 0.3)); + +<===> var/arg_1/output.css +a { + value: color(srgb var(--foo) 0.2 0.3); + type: string; +} + +<===> +================================================================================ +<===> var/arg_2/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(srgb 0.1 var(--foo) 0.3)); + +<===> var/arg_2/output.css +a { + value: color(srgb 0.1 var(--foo) 0.3); + type: string; +} + +<===> +================================================================================ +<===> var/arg_3/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(srgb 0.1 0.2 var(--foo))); + +<===> var/arg_3/output.css +a { + value: color(srgb 0.1 0.2 var(--foo)); + type: string; +} + +<===> +================================================================================ +<===> var/arg_4/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(srgb 0.1 0.2 0.3 / var(--foo))); + +<===> var/arg_4/output.css +a { + value: color(srgb 0.1 0.2 0.3/var(--foo)); + type: string; +} + +<===> +================================================================================ +<===> multi_argument_var/1_of_2/input.scss +// var() is substituted before parsing, so it may contain multiple arguments. +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(srgb var(--foo) 0.3)); + +<===> multi_argument_var/1_of_2/output.css +a { + value: color(srgb var(--foo) 0.3); + type: string; +} + +<===> +================================================================================ +<===> multi_argument_var/2_of_2/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(srgb 0.1 var(--foo))); + +<===> multi_argument_var/2_of_2/output.css +a { + value: color(srgb 0.1 var(--foo)); + type: string; +} + +<===> +================================================================================ +<===> multi_argument_var/1_of_1/no_alpha/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(srgb var(--foo))); + +<===> multi_argument_var/1_of_1/no_alpha/output.css +a { + value: color(srgb var(--foo)); + type: string; +} + +<===> +================================================================================ +<===> multi_argument_var/1_of_1/alpha/input.scss +@use 'core_functions/color/color/rgb-utils'; +@include rgb-utils.inspect(color(srgb var(--foo) / 0.4)); + +<===> multi_argument_var/1_of_1/alpha/output.css +a { + value: color(srgb var(--foo)/0.4); + type: string; +} diff --git a/spec/core_functions/color/hsl/one_arg/alpha.hrx b/spec/core_functions/color/hsl/one_arg/alpha.hrx index 4df1e93be..2b23c7d42 100644 --- a/spec/core_functions/color/hsl/one_arg/alpha.hrx +++ b/spec/core_functions/color/hsl/one_arg/alpha.hrx @@ -97,3 +97,24 @@ a {b: hsl(list.slash(180 60% 50%, 0))} a { b: hsla(180, 60%, 50%, 0); } + +<===> +================================================================================ +<===> missing/slash/input.scss +a {b: hsl(180 60% 50% / none)} + +<===> missing/slash/output.css +a { + b: hsl(180deg 60% 50% / none); +} + +<===> +================================================================================ +<===> missing/slash_list/input.scss +@use 'sass:list'; +a {b: hsl(list.slash(180 60% 50%, none))} + +<===> missing/slash_list/output.css +a { + b: hsl(180deg 60% 50% / none); +} diff --git a/spec/core_functions/color/hsl/one_arg/no_alpha.hrx b/spec/core_functions/color/hsl/one_arg/no_alpha.hrx index 4363177b5..e175a51c1 100644 --- a/spec/core_functions/color/hsl/one_arg/no_alpha.hrx +++ b/spec/core_functions/color/hsl/one_arg/no_alpha.hrx @@ -122,6 +122,36 @@ More info: https://sass-lang.com/d/function-units ' input.scss 1:7 root stylesheet +<===> +================================================================================ +<===> missing/hue/input.scss +a {b: hsl(none 100% 50%)} + +<===> missing/hue/output.css +a { + b: hsl(none 100% 50%); +} + +<===> +================================================================================ +<===> missing/saturation/input.scss +a {b: hsl(0 none 50%)} + +<===> missing/saturation/output.css +a { + b: hsl(0deg none 50%); +} + +<===> +================================================================================ +<===> missing/lightness/input.scss +a {b: hsl(0 100% none)} + +<===> missing/lightness/output.css +a { + b: hsl(0deg 100% none); +} + <===> ================================================================================ <===> named/input.scss diff --git a/spec/core_functions/color/hwb/global.hrx b/spec/core_functions/color/hwb/global.hrx new file mode 100644 index 000000000..98324996d --- /dev/null +++ b/spec/core_functions/color/hwb/global.hrx @@ -0,0 +1,289 @@ +<===> alpha/in_gamut/transparent/input.scss +a {b: hwb(180 30% 40% / 0)} + +<===> alpha/in_gamut/transparent/output.css +a { + b: hsla(180, 33.3333333333%, 45%, 0); +} + +<===> +================================================================================ +<===> alpha/in_gamut/opaque/input.scss +a {b: hwb(180 30% 40% / 1)} + +<===> alpha/in_gamut/opaque/output.css +a { + b: hsl(180, 33.3333333333%, 45%); +} + +<===> +================================================================================ +<===> alpha/in_gamut/partial/input.scss +a {b: hwb(180 30% 40% / 0.5)} + +<===> alpha/in_gamut/partial/output.css +a { + b: hsla(180, 33.3333333333%, 45%, 0.5); +} + +<===> +================================================================================ +<===> alpha/in_gamut/named/input.scss +a {b: hwb($channels: 180 30% 40% / 0.4)} + +<===> alpha/in_gamut/named/output.css +a { + b: hsla(180, 33.3333333333%, 45%, 0.4); +} + +<===> +================================================================================ +<===> alpha/in_gamut/parenthesized/input.scss +// Extra parens shouldn't cause the slash to be forced into division. +a {b: (hwb(180 30% 40% / 0.4))} + +<===> alpha/in_gamut/parenthesized/output.css +a { + b: hsla(180, 33.3333333333%, 45%, 0.4); +} + +<===> +================================================================================ +<===> alpha/clamped/above/input.scss +a {b: hwb(0 30% 40% / 1.1)} + +<===> alpha/clamped/above/output.css +a { + b: hsl(0, 33.3333333333%, 45%); +} + +<===> +================================================================================ +<===> alpha/clamped/below/input.scss +a {b: hwb(0 30% 40% / -0.1)} + +<===> alpha/clamped/below/output.css +a { + b: hsla(0, 33.3333333333%, 45%, 0); +} + +<===> +================================================================================ +<===> alpha/missing/slash/input.scss +a {b: hwb(0 30% 40% / none)} + +<===> alpha/missing/slash/output.css +a { + b: hwb(0deg 30% 40% / none); +} + +<===> +================================================================================ +<===> alpha/missing/slash_list/input.scss +@use 'sass:list'; +a {b: hwb(list.slash(0 30% 40%, none))} + +<===> alpha/missing/slash_list/output.css +a { + b: hwb(0deg 30% 40% / none); +} + +<===> +================================================================================ +<===> no_alpha/input.scss +a {b: hwb(180 30% 40%)} + +<===> no_alpha/output.css +a { + b: hsl(180, 33.3333333333%, 45%); +} + +<===> +================================================================================ +<===> named/input.scss +a {b: hwb($channels: 180 30% 40% / 0.4)} + +<===> named/output.css +a { + b: hsla(180, 33.3333333333%, 45%, 0.4); +} + +<===> +================================================================================ +<===> missing/hue/input.scss +a {b: hwb(none 30% 40%)} + +<===> missing/hue/output.css +a { + b: hwb(none 30% 40%); +} + +<===> +================================================================================ +<===> missing/whiteness/input.scss +a {b: hwb(0 none 40%)} + +<===> missing/whiteness/output.css +a { + b: hwb(0deg none 40%); +} + +<===> +================================================================================ +<===> missing/blackness/input.scss +a {b: hwb(0 30% none)} + +<===> missing/blackness/output.css +a { + b: hwb(0deg 30% none); +} + +<===> +================================================================================ +<===> relative_color/static/alpha/input.scss +a {b: hwb(from #aaa h w b / 25%)} + +<===> relative_color/static/alpha/output.css +a { + b: hwb(from #aaa h w b/25%); +} + +<===> +================================================================================ +<===> relative_color/static/no_alpha/input.scss +a {b: hwb(from #aaa h w b)} + +<===> relative_color/static/no_alpha/output.css +a { + b: hwb(from #aaa h w b); +} + +<===> +================================================================================ +<===> relative_color/calc/alpha/input.scss +a {b: hwb(from #aaa calc(h + 180deg) w b / 25%)} + +<===> relative_color/calc/alpha/output.css +a { + b: hwb(from #aaa calc(h + 180deg) w b/25%); +} + +<===> +================================================================================ +<===> relative_color/calc/no_alpha/input.scss +a {b: hwb(from #aaa calc(h + 180deg) w b)} + +<===> relative_color/calc/no_alpha/output.css +a { + b: hwb(from #aaa calc(h + 180deg) w b); +} + +<===> +================================================================================ +<===> relative_color/var/alpha/input.scss +a {b: hwb(from var(--c) h w b / 25%)} + +<===> relative_color/var/alpha/output.css +a { + b: hwb(from var(--c) h w b/25%); +} + +<===> +================================================================================ +<===> relative_color/var/no_alpha/input.scss +a {b: hwb(from var(--c) h w b)} +<===> relative_color/var/no_alpha/output.css +a { + b: hwb(from var(--c) h w b); +} + +<===> +================================================================================ +<===> relative_color/different_case/alpha/input.scss +a {b: hwb(From #aaa h w b / 25%)} + +<===> relative_color/different_case/alpha/output.css +a { + b: hwb(From #aaa h w b/25%); +} + +<===> +================================================================================ +<===> relative_color/different_case/no_alpha/input.scss +a {b: hwb(From #aaa h w b)} + +<===> relative_color/different_case/no_alpha/output.css +a { + b: hwb(From #aaa h w b); +} + +<===> +================================================================================ +<===> relative_color/slash_list_alpha/input.scss +@use "sass:list"; +a {b: hwb(list.slash(from #aaa h w b, 25%))} + +<===> relative_color/slash_list_alpha/output.css +a { + b: hwb(from #aaa h w b / 25%); +} + +<===> +================================================================================ +<===> relative_color/error/options.yml +:todo: + - dart-sass + +<===> +================================================================================ +<===> relative_color/error/quoted/alpha/input.scss +a {b: hwb("from" #aaa h w b / 25%)} + +<===> relative_color/error/quoted/alpha/error +Error: Only 3 elements allowed, but 5 were passed. + , +1 | a {b: hwb("from" #aaa h w b / 25%)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 1:7 root stylesheet + +<===> +================================================================================ +<===> relative_color/error/quoted/no_alpha/input.scss +a {b: hwb("from" #aaa h w b)} + +<===> relative_color/error/quoted/no_alpha/error +Error: Only 3 elements allowed, but 5 were passed. + , +1 | a {b: hwb("from" #aaa h w b)} + | ^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 1:7 root stylesheet + +<===> +================================================================================ +<===> relative_color/error/wrong_keyword/alpha/input.scss +a {b: hwb(c #aaa h w b / 25%)} + +<===> relative_color/error/wrong_keyword/alpha/error +Error: Only 3 elements allowed, but 5 were passed. + , +1 | a {b: hwb(c #aaa h w b / 25%)} + | ^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 1:7 root stylesheet + +<===> +================================================================================ +<===> relative_color/error/wrong_keyword/no_alpha/input.scss +a {b: hwb(c #aaa h w b)} + +<===> relative_color/error/wrong_keyword/no_alpha/error +Error: Only 3 elements allowed, but 5 were passed. + , +1 | a {b: hwb(c #aaa h w b)} + | ^^^^^^^^^^^^^^^^^ + ' + input.scss 1:7 root stylesheet + + diff --git a/spec/core_functions/color/hwb/one_arg.hrx b/spec/core_functions/color/hwb/one_arg.hrx index 5dd629831..5f1bc2a3c 100644 --- a/spec/core_functions/color/hwb/one_arg.hrx +++ b/spec/core_functions/color/hwb/one_arg.hrx @@ -244,3 +244,5 @@ Error: Only 3 elements allowed, but 5 were passed. | ^^^^^^^^^^^^^^^^^ ' input.scss 1:7 root stylesheet + + diff --git a/spec/core_functions/color/oklch/README.md b/spec/core_functions/color/oklch/README.md new file mode 100644 index 000000000..5117c908e --- /dev/null +++ b/spec/core_functions/color/oklch/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. diff --git a/spec/core_functions/color/oklch/_utils.scss b/spec/core_functions/color/oklch/_utils.scss new file mode 100644 index 000000000..508c32e30 --- /dev/null +++ b/spec/core_functions/color/oklch/_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, 'lightness') + -real-channel($color, 'chroma') + -real-channel($color, 'hue'), + -real-channel($color, 'alpha') + ); + } + } +} diff --git a/spec/core_functions/color/oklch/alpha.hrx b/spec/core_functions/color/oklch/alpha.hrx new file mode 100644 index 000000000..acb10b5a4 --- /dev/null +++ b/spec/core_functions/color/oklch/alpha.hrx @@ -0,0 +1,120 @@ +<===> transparent/input.scss +@use 'core_functions/color/lch/utils'; +@include utils.inspect(oklch(1% 0.2 3deg / 0)); + +<===> transparent/output.css +a { + value: oklch(1% 0.2 3deg / 0); + channels: 1% 0.2 3deg / 0; +} + +<===> +================================================================================ +<===> opaque/input.scss +@use 'core_functions/color/lch/utils'; +@include utils.inspect(oklch(1% 0.2 3deg / 1)); + +<===> opaque/output.css +a { + value: oklch(1% 0.2 3deg); + channels: 1% 0.2 3deg / 1; +} + +<===> +================================================================================ +<===> partial/input.scss +@use 'core_functions/color/lch/utils'; +@include utils.inspect(oklch(1% 0.2 3deg / 0.4)); + +<===> partial/output.css +a { + value: oklch(1% 0.2 3deg / 0.4); + channels: 1% 0.2 3deg / 0.4; +} + +<===> +================================================================================ +<===> percent/input.scss +@use 'core_functions/color/lch/utils'; +@include utils.inspect(oklch(1% 0.2 3deg / 40%)); + +<===> percent/output.css +a { + value: oklch(1% 0.2 3deg / 0.4); + channels: 1% 0.2 3deg / 0.4; +} + +<===> +================================================================================ +<===> named/input.scss +@use 'core_functions/color/lch/utils'; +@include utils.inspect(oklch($channels: 1% 0.2 3deg / 0.4)); + +<===> named/output.css +a { + value: oklch(1% 0.2 3deg / 0.4); + channels: 1% 0.2 3deg / 0.4; +} + +<===> +================================================================================ +<===> slash_list/input.scss +@use "sass:list"; +@use 'core_functions/color/lch/utils'; +@include utils.inspect(oklch(list.slash(1% 0.2 3deg, 0.4))); + +<===> slash_list/output.css +a { + value: oklch(1% 0.2 3deg / 0.4); + channels: 1% 0.2 3deg / 0.4; +} + +<===> +================================================================================ +<===> none/slash/hue/input.scss +@use 'core_functions/color/lch/utils'; +@include utils.inspect(oklch(1% 0.2 none / 0.4)); + +<===> none/slash/hue/output.css +a { + value: oklch(1% 0.2 none / 0.4); + channels: 1% 0.2 none / 0.4; +} + +<===> +================================================================================ +<===> none/slash/alpha/input.scss +@use 'core_functions/color/lch/utils'; +@include utils.inspect(oklch(1% 0.2 3deg / none)); + +<===> none/slash/alpha/output.css +a { + value: oklch(1% 0.2 3deg / none); + channels: 1% 0.2 3deg / none; +} + +<===> +================================================================================ +<===> none/slash_list/hue/input.scss +@use 'sass:list'; +@use 'core_functions/color/lch/utils'; +@include utils.inspect(oklch(list.slash(1% 0.2 none, 0.4))); + +<===> none/slash_list/hue/output.css +a { + value: oklch(1% 0.2 none / 0.4); + channels: 1% 0.2 none / 0.4; +} + +<===> +================================================================================ +<===> none/slash_list/alpha/input.scss +@use 'sass:list'; +@use 'core_functions/color/lch/utils'; +@include utils.inspect(oklch(list.slash(1% 0.2 3deg, none))); + +<===> none/slash_list/alpha/output.css +a { + value: oklch(1% 0.2 3deg / none); + channels: 1% 0.2 3deg / none; +} diff --git a/spec/core_functions/color/oklch/error.hrx b/spec/core_functions/color/oklch/error.hrx new file mode 100644 index 000000000..b71803e34 --- /dev/null +++ b/spec/core_functions/color/oklch/error.hrx @@ -0,0 +1,272 @@ +<===> unit/lightness/input.scss +a {b: oklch(1px 0.2 3deg)} + +<===> unit/lightness/error +Error: $lightness: Expected 1px to have unit "%" or no units. + , +1 | a {b: oklch(1px 0.2 3deg)} + | ^^^^^^^^^^^^^^^^^^^ + ' + input.scss 1:7 root stylesheet + +<===> +================================================================================ +<===> unit/chroma/input.scss +a {b: oklch(1% 2px 3deg)} + +<===> unit/chroma/error +Error: $chroma: Expected 2px to have unit "%" or no units. + , +1 | a {b: oklch(1% 2px 3deg)} + | ^^^^^^^^^^^^^^^^^^ + ' + input.scss 1:7 root stylesheet + +<===> +================================================================================ +<===> unit/hue/unrelated/input.scss +a {b: oklch(1% 0.2 3px)} + +<===> unit/hue/unrelated/error +Error: $hue: Expected 3px to have an angle unit (deg, grad, rad, turn). + , +1 | a {b: oklch(1% 0.2 3px)} + | ^^^^^^^^^^^^^^^^^ + ' + input.scss 1:7 root stylesheet + +<===> +================================================================================ +<===> unit/hue/percent/input.scss +a {b: oklch(1% 0.2 3%)} + +<===> unit/hue/percent/error +Error: $hue: Expected 3% to have an angle unit (deg, grad, rad, turn). + , +1 | a {b: oklch(1% 0.2 3%)} + | ^^^^^^^^^^^^^^^^ + ' + input.scss 1:7 root stylesheet + +<===> +================================================================================ +<===> unit/alpha/slash/input.scss +a {b: oklch(1% 0.2 3deg/0.4px)} + +<===> unit/alpha/slash/error +Error: $alpha: Expected 0.4px to have unit "%" or no units. + , +1 | a {b: oklch(1% 0.2 3deg/0.4px)} + | ^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 1:7 root stylesheet + +<===> +================================================================================ +<===> unit/alpha/slash_list/input.scss +@use 'sass:list'; +a {b: oklch(list.slash(1% 0.2 3deg, 0.4px))} + +<===> unit/alpha/slash_list/error +Error: $alpha: Expected 0.4px to have unit "%" or no units. + , +2 | a {b: oklch(list.slash(1% 0.2 3deg, 0.4px))} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> type/lightness/input.scss +a {b: oklch(c 0.2 3deg)} + +<===> type/lightness/error +Error: $channels: Expected lightness channel to be a number, was c. + , +1 | a {b: oklch(c 0.2 3deg)} + | ^^^^^^^^^^^^^^^^^ + ' + input.scss 1:7 root stylesheet + +<===> +================================================================================ +<===> type/chroma/input.scss +a {b: oklch(1% c 3deg)} + +<===> type/chroma/error +Error: $channels: Expected chroma channel to be a number, was c. + , +1 | a {b: oklch(1% c 3deg)} + | ^^^^^^^^^^^^^^^^ + ' + input.scss 1:7 root stylesheet + +<===> +================================================================================ +<===> type/hue/input.scss +a {b: oklch(1% 0.2 c)} + +<===> type/hue/error +Error: $channels: Expected hue channel to be a number, was c. + , +1 | a {b: oklch(1% 0.2 c)} + | ^^^^^^^^^^^^^^^ + ' + input.scss 1:7 root stylesheet + +<===> +================================================================================ +<===> type/alpha/slash_list/input.scss +@use 'sass:list'; +a {b: oklch(list.slash(1% 0.2 3deg, c))} + +<===> type/alpha/slash_list/error +Error: $channels: c is not a number. + , +2 | a {b: oklch(list.slash(1% 0.2 3deg, c))} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> list/bracketed/input.scss +a {b: oklch([1% 0.2 3deg])} + +<===> list/bracketed/error +Error: $channels: Expected an unbracketed list, was [1% 0.2 3deg] + , +1 | a {b: oklch([1% 0.2 3deg])} + | ^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 1:7 root stylesheet + +<===> +================================================================================ +<===> list/comma/input.scss +a {b: oklch((1%, 2, 3deg))} + +<===> list/comma/error +Error: $channels: Expected a space- or slash-separated list, was (1%, 2, 3deg) + , +1 | a {b: oklch((1%, 2, 3deg))} + | ^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 1:7 root stylesheet + +<===> +================================================================================ +<===> list/slash/three/input.scss +@use 'sass:list'; +a {b: oklch(list.slash(1%, 2, 3deg))} + +<===> list/slash/three/error +Error: $channels: Only 2 slash-separated elements allowed, but 3 were passed. + , +2 | a {b: oklch(list.slash(1%, 2, 3deg))} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> list/slash/one/input.scss +@use 'sass:list'; +$single-arg-slash-separated: list.append((), 1% 0.2 3deg, $separator: slash); +a {b: oklch($single-arg-slash-separated)} + +<===> list/slash/one/error +Error: $channels: Only 2 slash-separated elements allowed, but 1 was passed. + , +3 | a {b: oklch($single-arg-slash-separated)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 3:7 root stylesheet + +<===> +================================================================================ +<===> list/empty/input.scss +a {b: oklch(())} + +<===> list/empty/error +Error: $channels: Color component list may not be empty. + , +1 | a {b: oklch(())} + | ^^^^^^^^^ + ' + input.scss 1:7 root stylesheet + +<===> +================================================================================ +<===> list/empty_space/input.scss +@use 'sass:list'; +$empty-space: list.join((), (), $separator: space); +a {b: oklch(())} + +<===> list/empty_space/error +Error: $channels: Color component list may not be empty. + , +3 | a {b: oklch(())} + | ^^^^^^^^^ + ' + input.scss 3:7 root stylesheet + +<===> +================================================================================ +<===> list/too_few_channels/input.scss +a {b: oklch(1% 2)} + +<===> list/too_few_channels/error +Error: $channels: The oklch color space has 3 channels but (1% 2) has 2. + , +1 | a {b: oklch(1% 2)} + | ^^^^^^^^^^^ + ' + input.scss 1:7 root stylesheet + +<===> +================================================================================ +<===> list/too_many_channels/input.scss +a {b: oklch(1% 0.2 3deg 0.4)} + +<===> list/too_many_channels/error +Error: $channels: The oklch color space has 3 channels but (1% 0.2 3deg 0.4) has 4. + , +1 | a {b: oklch(1% 0.2 3deg 0.4)} + | ^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 1:7 root stylesheet + +<===> +================================================================================ +<===> too_few_args/input.scss +a {b: oklch()} + +<===> too_few_args/error +Error: Missing argument $channels. + ,--> input.scss +1 | a {b: oklch()} + | ^^^^^^^ invocation + ' + ,--> sass:color +1 | @function oklch($channels) { + | ================ declaration + ' + input.scss 1:7 root stylesheet + +<===> +================================================================================ +<===> too_many_args/input.scss +a {b: oklch(1%, 2, 3deg, 0.4)} + +<===> too_many_args/error +Error: Only 1 argument allowed, but 4 were passed. + ,--> input.scss +1 | a {b: oklch(1%, 2, 3deg, 0.4)} + | ^^^^^^^^^^^^^^^^^^^^^^^ invocation + ' + ,--> sass:color +1 | @function oklch($channels) { + | ================ declaration + ' + input.scss 1:7 root stylesheet diff --git a/spec/core_functions/color/oklch/no_alpha.hrx b/spec/core_functions/color/oklch/no_alpha.hrx new file mode 100644 index 000000000..9b24e8e78 --- /dev/null +++ b/spec/core_functions/color/oklch/no_alpha.hrx @@ -0,0 +1,189 @@ +<===> unitless/in_range/input.scss +@use 'core_functions/color/lch/utils'; +@include utils.inspect(oklch(0.1 0.2 3deg)); + +<===> unitless/in_range/output.css +a { + value: oklch(10% 0.2 3deg); + channels: 10% 0.2 3deg / 1; +} + +<===> +================================================================================ +<===> unitless/lightness/above_range/input.scss +@use 'core_functions/color/lch/utils'; +@include utils.inspect(oklch(1.1 0.2 3deg)); + +<===> unitless/lightness/above_range/output.css +a { + value: oklch(100% 0.2 3deg); + channels: 100% 0.2 3deg / 1; +} + +<===> +================================================================================ +<===> unitless/lightness/below_range/input.scss +@use 'core_functions/color/lch/utils'; +@include utils.inspect(oklch(-0.1 0.2 3deg)); + +<===> unitless/lightness/below_range/output.css +a { + value: oklch(0% 0.2 3deg); + channels: 0% 0.2 3deg / 1; +} + +<===> +================================================================================ +<===> unitless/chroma/above_range/input.scss +@use 'core_functions/color/lch/utils'; +@include utils.inspect(oklch(1% 0.5 3deg)); + +<===> unitless/chroma/above_range/output.css +a { + value: oklch(1% 0.5 3deg); + channels: 1% 0.5 3deg / 1; +} + +<===> +================================================================================ +<===> unitless/chroma/below_range/input.scss +@use 'core_functions/color/lch/utils'; +@include utils.inspect(oklch(1% -0.1 3deg)); + +<===> unitless/chroma/below_range/output.css +a { + value: oklch(1% -0.1 3deg); + channels: 1% -0.1 3deg / 1; +} + +<===> +================================================================================ +<===> unitless/hue/above_range/input.scss +@use 'core_functions/color/lch/utils'; +@include utils.inspect(oklch(1% 0.2 361deg)); + +<===> unitless/hue/above_range/output.css +a { + value: oklch(1% 0.2 1deg); + channels: 1% 0.2 1deg / 1; +} + +<===> +================================================================================ +<===> unitless/hue/below_range/input.scss +@use 'core_functions/color/lch/utils'; +@include utils.inspect(oklch(1% 0.2 -1deg)); + +<===> unitless/hue/below_range/output.css +a { + value: oklch(1% 0.2 359deg); + channels: 1% 0.2 359deg / 1; +} + +<===> +================================================================================ +<===> percent/in_range/input.scss +@use 'core_functions/color/lch/utils'; +@include utils.inspect(oklch(1% 2% 3deg)); + +<===> percent/in_range/output.css +a { + value: oklch(1% 0.008 3deg); + channels: 1% 0.008 3deg / 1; +} + +<===> +================================================================================ +<===> percent/lightness/above_range/input.scss +@use 'core_functions/color/lch/utils'; +@include utils.inspect(oklch(110% 0.2 3deg)); + +<===> percent/lightness/above_range/output.css +a { + value: oklch(100% 0.2 3deg); + channels: 100% 0.2 3deg / 1; +} + +<===> +================================================================================ +<===> percent/lightness/below_range/input.scss +@use 'core_functions/color/lch/utils'; +@include utils.inspect(oklch(-1% 0.2 3deg)); + +<===> percent/lightness/below_range/output.css +a { + value: oklch(0% 0.2 3deg); + channels: 0% 0.2 3deg / 1; +} + +<===> +================================================================================ +<===> percent/chroma/above_range/input.scss +@use 'core_functions/color/lch/utils'; +@include utils.inspect(oklch(1% 101% 3deg)); + +<===> percent/chroma/above_range/output.css +a { + value: oklch(1% 0.404 3deg); + channels: 1% 0.404 3deg / 1; +} + +<===> +================================================================================ +<===> percent/chroma/below_range/input.scss +@use 'core_functions/color/lch/utils'; +@include utils.inspect(oklch(1% -1% 3deg)); + +<===> percent/chroma/below_range/output.css +a { + value: oklch(1% -0.004 3deg); + channels: 1% -0.004 3deg / 1; +} + +<===> +================================================================================ +<===> none/lightness/input.scss +@use 'core_functions/color/lch/utils'; +@include utils.inspect(oklch(none 0.2 3deg)); + +<===> none/lightness/output.css +a { + value: oklch(none 0.2 3deg); + channels: none 0.2 3deg / 1; +} + +<===> +================================================================================ +<===> none/chroma/input.scss +@use 'core_functions/color/lch/utils'; +@include utils.inspect(oklch(1% none 3deg)); + +<===> none/chroma/output.css +a { + value: oklch(1% none 3deg); + channels: 1% none 3deg / 1; +} + +<===> +================================================================================ +<===> none/hue/input.scss +@use 'core_functions/color/lch/utils'; +@include utils.inspect(oklch(1% 0.2 none)); + +<===> none/hue/output.css +a { + value: oklch(1% 0.2 none); + channels: 1% 0.2 none / 1; +} + +<===> +================================================================================ +<===> named/input.scss +@use 'core_functions/color/lch/utils'; +@include utils.inspect(oklch($channels: 1% 0.2 3deg)); + +<===> named/output.css +a { + value: oklch(1% 0.2 3deg); + channels: 1% 0.2 3deg / 1; +} diff --git a/spec/core_functions/color/oklch/options.yml b/spec/core_functions/color/oklch/options.yml new file mode 100644 index 000000000..99ecec7ed --- /dev/null +++ b/spec/core_functions/color/oklch/options.yml @@ -0,0 +1,3 @@ +--- +:ignore_for: +- libsass diff --git a/spec/core_functions/color/oklch/special_functions.hrx b/spec/core_functions/color/oklch/special_functions.hrx new file mode 100644 index 000000000..8955526c4 --- /dev/null +++ b/spec/core_functions/color/oklch/special_functions.hrx @@ -0,0 +1,142 @@ +<===> calculation/arg_1/input.scss +@use 'core_functions/color/lch/utils'; +@include utils.inspect(oklch(calc(1px + 1%) 0.2 3deg)); + +<===> calculation/arg_1/output.css +a { + value: oklch(calc(1px + 1%) 0.2 3deg); + type: string; +} + +<===> +================================================================================ +<===> calculation/arg_2/input.scss +@use 'core_functions/color/lch/utils'; +@include utils.inspect(oklch(1% calc(1px + 1%) 3deg)); + +<===> calculation/arg_2/output.css +a { + value: oklch(1% calc(1px + 1%) 3deg); + type: string; +} + +<===> +================================================================================ +<===> calculation/arg_3/input.scss +@use 'core_functions/color/lch/utils'; +@include utils.inspect(oklch(1% 0.2 calc(1px + 1%))); + +<===> calculation/arg_3/output.css +a { + value: oklch(1% 0.2 calc(1px + 1%)); + type: string; +} + +<===> +================================================================================ +<===> calculation/arg_4/input.scss +@use 'core_functions/color/lch/utils'; +@include utils.inspect(oklch(1% 0.2 3deg / calc(1px + 1%))); + +<===> calculation/arg_4/output.css +a { + value: oklch(1% 0.2 3deg/calc(1px + 1%)); + type: string; +} + +<===> +================================================================================ +<===> var/arg_1/input.scss +@use 'core_functions/color/lch/utils'; +@include utils.inspect(oklch(var(--foo) 0.2 3deg)); + +<===> var/arg_1/output.css +a { + value: oklch(var(--foo) 0.2 3deg); + type: string; +} + +<===> +================================================================================ +<===> var/arg_2/input.scss +@use 'core_functions/color/lch/utils'; +@include utils.inspect(oklch(1% var(--foo) 3deg)); + +<===> var/arg_2/output.css +a { + value: oklch(1% var(--foo) 3deg); + type: string; +} + +<===> +================================================================================ +<===> var/arg_3/input.scss +@use 'core_functions/color/lch/utils'; +@include utils.inspect(oklch(1% 0.2 var(--foo))); + +<===> var/arg_3/output.css +a { + value: oklch(1% 0.2 var(--foo)); + type: string; +} + +<===> +================================================================================ +<===> var/arg_4/input.scss +@use 'core_functions/color/lch/utils'; +@include utils.inspect(oklch(1% 0.2 3deg / var(--foo))); + +<===> var/arg_4/output.css +a { + value: oklch(1% 0.2 3deg/var(--foo)); + type: string; +} + +<===> +================================================================================ +<===> multi_argument_var/1_of_2/input.scss +// var() is substituted before parsing, so it may contain multiple arguments. +@use 'core_functions/color/lch/utils'; +@include utils.inspect(oklch(var(--foo) 2deg)); + +<===> multi_argument_var/1_of_2/output.css +a { + value: oklch(var(--foo) 2deg); + type: string; +} + +<===> +================================================================================ +<===> multi_argument_var/2_of_2/input.scss +@use 'core_functions/color/lch/utils'; +@include utils.inspect(oklch(1% var(--foo))); + +<===> multi_argument_var/2_of_2/output.css +a { + value: oklch(1% var(--foo)); + type: string; +} + +<===> +================================================================================ +<===> multi_argument_var/1_of_1/no_alpha/input.scss +@use 'core_functions/color/lch/utils'; +@include utils.inspect(oklch(var(--foo))); + +<===> multi_argument_var/1_of_1/no_alpha/output.css +a { + value: oklch(var(--foo)); + type: string; +} + +<===> +================================================================================ +<===> multi_argument_var/1_of_1/alpha/input.scss +@use 'core_functions/color/lch/utils'; +@include utils.inspect(oklch(var(--foo) / 0.4)); + +<===> multi_argument_var/1_of_1/alpha/output.css +a { + value: oklch(var(--foo)/0.4); + type: string; +} diff --git a/spec/core_functions/color/rgb/one_arg/alpha.hrx b/spec/core_functions/color/rgb/one_arg/alpha.hrx index c9b346d32..0efd910ad 100644 --- a/spec/core_functions/color/rgb/one_arg/alpha.hrx +++ b/spec/core_functions/color/rgb/one_arg/alpha.hrx @@ -154,3 +154,24 @@ a {b: rgb(list.slash(0 255 127, 0))} a { b: rgba(0, 255, 127, 0); } + +<===> +================================================================================ +<===> missing/slash/input.scss +a {b: rgb(0 255 127 / none)} + +<===> missing/slash/output.css +a { + b: rgb(0 255 127 / none); +} + +<===> +================================================================================ +<===> missing/slash_list/input.scss +@use 'sass:list'; +a {b: rgb(list.slash(0 255 127, none))} + +<===> missing/slash_list/output.css +a { + b: rgb(0 255 127 / none); +} diff --git a/spec/core_functions/color/rgb/one_arg/no_alpha.hrx b/spec/core_functions/color/rgb/one_arg/no_alpha.hrx index efcd185a4..7b86b6c1c 100644 --- a/spec/core_functions/color/rgb/one_arg/no_alpha.hrx +++ b/spec/core_functions/color/rgb/one_arg/no_alpha.hrx @@ -180,3 +180,33 @@ a {b: rgb(0 0 200%)} a { b: rgb(0, 0, 255); } + +<===> +================================================================================ +<===> missing/red/input.scss +a {b: rgb(none 52 66)} + +<===> missing/red/output.css +a { + b: rgb(none 52 66); +} + +<===> +================================================================================ +<===> missing/green/input.scss +a {b: rgb(18 none 66)} + +<===> missing/green/output.css +a { + b: rgb(18 none 66); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +a {b: rgb(18 52 none)} + +<===> missing/blue/output.css +a { + b: rgb(18 52 none); +}