From 911dfcd6edbe6793527d8a2b4ce2acc729f10494 Mon Sep 17 00:00:00 2001 From: Natalie Weizenbaum Date: Tue, 10 Oct 2023 16:03:37 -0700 Subject: [PATCH 01/18] Unify the color.inspect function --- spec/core_functions/color/_utils.scss | 70 ++++++++++++++++++ .../color/color/_rgb-utils.scss | 27 ------- .../color/color/_xyz-utils.scss | 27 ------- spec/core_functions/color/color/alpha.hrx | 48 ++++++------- spec/core_functions/color/color/no_alpha.hrx | 24 +++---- .../color/color/spaces/a98_rgb.hrx | 56 +++++++-------- .../color/color/spaces/display_p3.hrx | 56 +++++++-------- .../color/color/spaces/prophoto_rgb.hrx | 56 +++++++-------- .../color/color/spaces/rec2020.hrx | 56 +++++++-------- .../color/color/spaces/srgb.hrx | 56 +++++++-------- .../color/color/spaces/srgb_linear.hrx | 56 +++++++-------- .../core_functions/color/color/spaces/xyz.hrx | 60 ++++++++-------- .../color/color/spaces/xyz_d50.hrx | 56 +++++++-------- .../color/color/special_functions.hrx | 48 ++++++------- spec/core_functions/color/lab/_utils.scss | 27 ------- spec/core_functions/color/lab/alpha.hrx | 24 +++---- spec/core_functions/color/lab/no_alpha.hrx | 32 ++++----- .../color/lab/special_functions/alpha.hrx | 72 +++++++++---------- .../color/lab/special_functions/no_alpha.hrx | 42 +++++------ .../lab/special_functions/slash_list.hrx | 6 +- spec/core_functions/color/lch/_utils.scss | 27 ------- spec/core_functions/color/lch/alpha.hrx | 20 +++--- spec/core_functions/color/lch/no_alpha.hrx | 32 ++++----- .../color/lch/special_functions.hrx | 24 +++---- spec/core_functions/color/oklab/_utils.scss | 27 ------- spec/core_functions/color/oklab/alpha.hrx | 24 +++---- spec/core_functions/color/oklab/no_alpha.hrx | 34 ++++----- .../color/oklab/special_functions.hrx | 24 +++---- spec/core_functions/color/oklch/_utils.scss | 27 ------- spec/core_functions/color/oklch/alpha.hrx | 20 +++--- spec/core_functions/color/oklch/no_alpha.hrx | 32 ++++----- .../color/oklch/special_functions.hrx | 24 +++---- 32 files changed, 561 insertions(+), 653 deletions(-) create mode 100644 spec/core_functions/color/_utils.scss delete mode 100644 spec/core_functions/color/color/_rgb-utils.scss delete mode 100644 spec/core_functions/color/color/_xyz-utils.scss delete mode 100644 spec/core_functions/color/lab/_utils.scss delete mode 100644 spec/core_functions/color/lch/_utils.scss delete mode 100644 spec/core_functions/color/oklab/_utils.scss delete mode 100644 spec/core_functions/color/oklch/_utils.scss diff --git a/spec/core_functions/color/_utils.scss b/spec/core_functions/color/_utils.scss new file mode 100644 index 000000000..62a7b81bb --- /dev/null +++ b/spec/core_functions/color/_utils.scss @@ -0,0 +1,70 @@ +@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 { + $space: color.space($color); + + @if $space == 'rgb' or $space == 'srgb' or $space == 'srgb-linear' or + $space == 'display-p3' or $space == 'a98-rgb' or + $space == 'prophoto-rgb' or $space == 'rec2020' { + channels: list.slash( + -real-channel($color, 'red') + -real-channel($color, 'green') + -real-channel($color, 'blue'), + -real-channel($color, 'alpha') + ); + } @else if $space == 'hwb' { + channels: list.slash( + -real-channel($color, 'hue') + -real-channel($color, 'whiteness') + -real-channel($color, 'blackness'), + -real-channel($color, 'alpha') + ); + } @else if $space == 'hsl' { + channels: list.slash( + -real-channel($color, 'hue') + -real-channel($color, 'saturation') + -real-channel($color, 'lightness'), + -real-channel($color, 'alpha') + ); + } @else if $space == 'xyz' or $space == 'xyz-d50' { + channels: list.slash( + -real-channel($color, 'x') + -real-channel($color, 'y') + -real-channel($color, 'z'), + -real-channel($color, 'alpha') + ); + } @else if $space == 'lab' or $space == 'oklab' { + channels: list.slash( + -real-channel($color, 'lightness') + -real-channel($color, 'a') + -real-channel($color, 'b'), + -real-channel($color, 'alpha') + ); + } @else if $space == 'lch' or $space == 'oklch' { + channels: list.slash( + -real-channel($color, 'lightness') + -real-channel($color, 'chroma') + -real-channel($color, 'hue'), + -real-channel($color, 'alpha') + ); + } @else { + @error "Unknown color space #{$space}"; + } + } + } +} diff --git a/spec/core_functions/color/color/_rgb-utils.scss b/spec/core_functions/color/color/_rgb-utils.scss deleted file mode 100644 index 266f54772..000000000 --- a/spec/core_functions/color/color/_rgb-utils.scss +++ /dev/null @@ -1,27 +0,0 @@ -@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 deleted file mode 100644 index 8290223bd..000000000 --- a/spec/core_functions/color/color/_xyz-utils.scss +++ /dev/null @@ -1,27 +0,0 @@ -@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 index 3e672f825..0fff380a6 100644 --- a/spec/core_functions/color/color/alpha.hrx +++ b/spec/core_functions/color/color/alpha.hrx @@ -1,6 +1,6 @@ <===> transparent/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(srgb 0.1 0.2 0.3 / 0)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb 0.1 0.2 0.3 / 0)); <===> transparent/output.css a { @@ -11,8 +11,8 @@ a { <===> ================================================================================ <===> opaque/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(srgb 0.1 0.2 0.3 / 1)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb 0.1 0.2 0.3 / 1)); <===> opaque/output.css a { @@ -23,8 +23,8 @@ a { <===> ================================================================================ <===> partial/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(srgb 0.1 0.2 0.3 / 0.4)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb 0.1 0.2 0.3 / 0.4)); <===> partial/output.css a { @@ -35,8 +35,8 @@ a { <===> ================================================================================ <===> percent/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(srgb 0.1 0.2 0.3 / 40%)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb 0.1 0.2 0.3 / 40%)); <===> percent/output.css a { @@ -47,8 +47,8 @@ a { <===> ================================================================================ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color($description: srgb 0.1 0.2 0.3 / 0.4)); <===> named/output.css a { @@ -60,8 +60,8 @@ a { ================================================================================ <===> 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))); +@use 'core_functions/color/utils'; +@include utils.inspect(color(list.slash(srgb 0.1 0.2 0.3, 0.4))); <===> slash_list/output.css a { @@ -72,8 +72,8 @@ a { <===> ================================================================================ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb 0.1 0.2 none / 0.4)); <===> none/slash/blue/output.css a { @@ -84,8 +84,8 @@ a { <===> ================================================================================ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb 0.1 0.2 0.3 / none)); <===> none/slash/alpha/output.css a { @@ -97,8 +97,8 @@ a { ================================================================================ <===> 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))); +@use 'core_functions/color/utils'; +@include utils.inspect(color(list.slash(srgb 0.1 0.2 none, 0.4))); <===> none/slash_list/blue/output.css a { @@ -110,8 +110,8 @@ a { ================================================================================ <===> 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))); +@use 'core_functions/color/utils'; +@include utils.inspect(color(list.slash(srgb 0.1 0.2 0.3, none))); <===> none/slash_list/alpha/output.css a { @@ -122,8 +122,8 @@ a { <===> ================================================================================ <===> relative_color/slash/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(from #aaa srgb r g b / 25%)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(from #aaa srgb r g b / 25%)); <===> relative_color/slash/output.css a { @@ -135,8 +135,8 @@ a { ================================================================================ <===> 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%))); +@use 'core_functions/color/utils'; +@include utils.inspect(color(list.slash(from #aaa srgb r g b, 25%))); <===> relative_color/slash_list/output.css a { diff --git a/spec/core_functions/color/color/no_alpha.hrx b/spec/core_functions/color/color/no_alpha.hrx index 218077126..d7caf15f4 100644 --- a/spec/core_functions/color/color/no_alpha.hrx +++ b/spec/core_functions/color/color/no_alpha.hrx @@ -1,6 +1,6 @@ <===> none/red/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(srgb none 0.2 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb none 0.2 0.3)); <===> none/red/output.css a { @@ -11,8 +11,8 @@ a { <===> ================================================================================ <===> none/green/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(srgb 0.1 none 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb 0.1 none 0.3)); <===> none/green/output.css a { @@ -23,8 +23,8 @@ a { <===> ================================================================================ <===> none/blue/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(srgb 0.1 none 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb 0.1 none 0.3)); <===> none/blue/output.css a { @@ -35,8 +35,8 @@ a { <===> ================================================================================ <===> case/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(sRGB 0.1 none 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(sRGB 0.1 none 0.3)); <===> case/output.css a { @@ -47,8 +47,8 @@ a { <===> ================================================================================ <===> relative_color/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(from #aaa srgb r g b)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(from #aaa srgb r g b)); <===> relative_color/output.css a { @@ -59,8 +59,8 @@ a { <===> ================================================================================ <===> named/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color($description: srgb 0.1 0.2 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color($description: srgb 0.1 0.2 0.3)); <===> named/output.css a { diff --git a/spec/core_functions/color/color/spaces/a98_rgb.hrx b/spec/core_functions/color/color/spaces/a98_rgb.hrx index 2c073216f..37c7fb04b 100644 --- a/spec/core_functions/color/color/spaces/a98_rgb.hrx +++ b/spec/core_functions/color/color/spaces/a98_rgb.hrx @@ -1,6 +1,6 @@ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(a98-rgb 0.1 0.2 0.3)); <===> unitless/in_range/output.css a { @@ -11,8 +11,8 @@ a { <===> ================================================================================ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(a98-rgb 1.1 0.2 0.3)); <===> unitless/red/above_range/output.css a { @@ -23,8 +23,8 @@ a { <===> ================================================================================ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(a98-rgb -0.1 0.2 0.3)); <===> unitless/red/below_range/output.css a { @@ -35,8 +35,8 @@ a { <===> ================================================================================ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(a98-rgb 0.1 1.2 0.3)); <===> unitless/green/above_range/output.css a { @@ -47,8 +47,8 @@ a { <===> ================================================================================ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(a98-rgb 0.1 -0.2 0.3)); <===> unitless/green/below_range/output.css a { @@ -59,8 +59,8 @@ a { <===> ================================================================================ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(a98-rgb 0.1 0.2 1.3)); <===> unitless/blue/above_range/output.css a { @@ -71,8 +71,8 @@ a { <===> ================================================================================ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(a98-rgb 0.1 0.2 -0.3)); <===> unitless/blue/below_range/output.css a { @@ -83,8 +83,8 @@ a { <===> ================================================================================ <===> percent/in_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(a98-rgb 10% 20% 30%)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(a98-rgb 10% 20% 30%)); <===> percent/in_range/output.css a { @@ -95,8 +95,8 @@ a { <===> ================================================================================ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(a98-rgb 110% 0.2 0.3)); <===> percent/red/above_range/output.css a { @@ -107,8 +107,8 @@ a { <===> ================================================================================ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(a98-rgb -10% 0.2 0.3)); <===> percent/red/below_range/output.css a { @@ -119,8 +119,8 @@ a { <===> ================================================================================ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(a98-rgb 0.1 120% 0.3)); <===> percent/green/above_range/output.css a { @@ -131,8 +131,8 @@ a { <===> ================================================================================ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(a98-rgb 0.1 -20% 0.3)); <===> percent/green/below_range/output.css a { @@ -143,8 +143,8 @@ a { <===> ================================================================================ <===> 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%)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(a98-rgb 0.1 0.2 130%)); <===> percent/blue/above_range/output.css a { @@ -155,8 +155,8 @@ a { <===> ================================================================================ <===> 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%)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(a98-rgb 0.1 0.2 -30%)); <===> percent/blue/below_range/output.css a { diff --git a/spec/core_functions/color/color/spaces/display_p3.hrx b/spec/core_functions/color/color/spaces/display_p3.hrx index a7ae00505..f2886cd84 100644 --- a/spec/core_functions/color/color/spaces/display_p3.hrx +++ b/spec/core_functions/color/color/spaces/display_p3.hrx @@ -1,6 +1,6 @@ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(display-p3 0.1 0.2 0.3)); <===> unitless/in_range/output.css a { @@ -11,8 +11,8 @@ a { <===> ================================================================================ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(display-p3 1.1 0.2 0.3)); <===> unitless/red/above_range/output.css a { @@ -23,8 +23,8 @@ a { <===> ================================================================================ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(display-p3 -0.1 0.2 0.3)); <===> unitless/red/below_range/output.css a { @@ -35,8 +35,8 @@ a { <===> ================================================================================ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(display-p3 0.1 1.2 0.3)); <===> unitless/green/above_range/output.css a { @@ -47,8 +47,8 @@ a { <===> ================================================================================ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(display-p3 0.1 -0.2 0.3)); <===> unitless/green/below_range/output.css a { @@ -59,8 +59,8 @@ a { <===> ================================================================================ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(display-p3 0.1 0.2 1.3)); <===> unitless/blue/above_range/output.css a { @@ -71,8 +71,8 @@ a { <===> ================================================================================ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(display-p3 0.1 0.2 -0.3)); <===> unitless/blue/below_range/output.css a { @@ -83,8 +83,8 @@ a { <===> ================================================================================ <===> percent/in_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(display-p3 10% 20% 30%)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(display-p3 10% 20% 30%)); <===> percent/in_range/output.css a { @@ -95,8 +95,8 @@ a { <===> ================================================================================ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(display-p3 110% 0.2 0.3)); <===> percent/red/above_range/output.css a { @@ -107,8 +107,8 @@ a { <===> ================================================================================ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(display-p3 -10% 0.2 0.3)); <===> percent/red/below_range/output.css a { @@ -119,8 +119,8 @@ a { <===> ================================================================================ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(display-p3 0.1 120% 0.3)); <===> percent/green/above_range/output.css a { @@ -131,8 +131,8 @@ a { <===> ================================================================================ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(display-p3 0.1 -20% 0.3)); <===> percent/green/below_range/output.css a { @@ -143,8 +143,8 @@ a { <===> ================================================================================ <===> 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%)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(display-p3 0.1 0.2 130%)); <===> percent/blue/above_range/output.css a { @@ -155,8 +155,8 @@ a { <===> ================================================================================ <===> 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%)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(display-p3 0.1 0.2 -30%)); <===> percent/blue/below_range/output.css a { diff --git a/spec/core_functions/color/color/spaces/prophoto_rgb.hrx b/spec/core_functions/color/color/spaces/prophoto_rgb.hrx index 080f28eb0..afd206b65 100644 --- a/spec/core_functions/color/color/spaces/prophoto_rgb.hrx +++ b/spec/core_functions/color/color/spaces/prophoto_rgb.hrx @@ -1,6 +1,6 @@ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(prophoto-rgb 0.1 0.2 0.3)); <===> unitless/in_range/output.css a { @@ -11,8 +11,8 @@ a { <===> ================================================================================ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(prophoto-rgb 1.1 0.2 0.3)); <===> unitless/red/above_range/output.css a { @@ -23,8 +23,8 @@ a { <===> ================================================================================ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(prophoto-rgb -0.1 0.2 0.3)); <===> unitless/red/below_range/output.css a { @@ -35,8 +35,8 @@ a { <===> ================================================================================ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(prophoto-rgb 0.1 1.2 0.3)); <===> unitless/green/above_range/output.css a { @@ -47,8 +47,8 @@ a { <===> ================================================================================ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(prophoto-rgb 0.1 -0.2 0.3)); <===> unitless/green/below_range/output.css a { @@ -59,8 +59,8 @@ a { <===> ================================================================================ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(prophoto-rgb 0.1 0.2 1.3)); <===> unitless/blue/above_range/output.css a { @@ -71,8 +71,8 @@ a { <===> ================================================================================ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(prophoto-rgb 0.1 0.2 -0.3)); <===> unitless/blue/below_range/output.css a { @@ -83,8 +83,8 @@ a { <===> ================================================================================ <===> percent/in_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(prophoto-rgb 10% 20% 30%)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(prophoto-rgb 10% 20% 30%)); <===> percent/in_range/output.css a { @@ -95,8 +95,8 @@ a { <===> ================================================================================ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(prophoto-rgb 110% 0.2 0.3)); <===> percent/red/above_range/output.css a { @@ -107,8 +107,8 @@ a { <===> ================================================================================ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(prophoto-rgb -10% 0.2 0.3)); <===> percent/red/below_range/output.css a { @@ -119,8 +119,8 @@ a { <===> ================================================================================ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(prophoto-rgb 0.1 120% 0.3)); <===> percent/green/above_range/output.css a { @@ -131,8 +131,8 @@ a { <===> ================================================================================ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(prophoto-rgb 0.1 -20% 0.3)); <===> percent/green/below_range/output.css a { @@ -143,8 +143,8 @@ a { <===> ================================================================================ <===> 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%)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(prophoto-rgb 0.1 0.2 130%)); <===> percent/blue/above_range/output.css a { @@ -155,8 +155,8 @@ a { <===> ================================================================================ <===> 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%)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(prophoto-rgb 0.1 0.2 -30%)); <===> percent/blue/below_range/output.css a { diff --git a/spec/core_functions/color/color/spaces/rec2020.hrx b/spec/core_functions/color/color/spaces/rec2020.hrx index c5df2d5f1..c8a402cb5 100644 --- a/spec/core_functions/color/color/spaces/rec2020.hrx +++ b/spec/core_functions/color/color/spaces/rec2020.hrx @@ -1,6 +1,6 @@ <===> unitless/in_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(rec2020 0.1 0.2 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(rec2020 0.1 0.2 0.3)); <===> unitless/in_range/output.css a { @@ -11,8 +11,8 @@ a { <===> ================================================================================ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(rec2020 1.1 0.2 0.3)); <===> unitless/red/above_range/output.css a { @@ -23,8 +23,8 @@ a { <===> ================================================================================ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(rec2020 -0.1 0.2 0.3)); <===> unitless/red/below_range/output.css a { @@ -35,8 +35,8 @@ a { <===> ================================================================================ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(rec2020 0.1 1.2 0.3)); <===> unitless/green/above_range/output.css a { @@ -47,8 +47,8 @@ a { <===> ================================================================================ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(rec2020 0.1 -0.2 0.3)); <===> unitless/green/below_range/output.css a { @@ -59,8 +59,8 @@ a { <===> ================================================================================ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(rec2020 0.1 0.2 1.3)); <===> unitless/blue/above_range/output.css a { @@ -71,8 +71,8 @@ a { <===> ================================================================================ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(rec2020 0.1 0.2 -0.3)); <===> unitless/blue/below_range/output.css a { @@ -83,8 +83,8 @@ a { <===> ================================================================================ <===> percent/in_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(rec2020 10% 20% 30%)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(rec2020 10% 20% 30%)); <===> percent/in_range/output.css a { @@ -95,8 +95,8 @@ a { <===> ================================================================================ <===> percent/red/above_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(rec2020 110% 0.2 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(rec2020 110% 0.2 0.3)); <===> percent/red/above_range/output.css a { @@ -107,8 +107,8 @@ a { <===> ================================================================================ <===> percent/red/below_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(rec2020 -10% 0.2 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(rec2020 -10% 0.2 0.3)); <===> percent/red/below_range/output.css a { @@ -119,8 +119,8 @@ a { <===> ================================================================================ <===> percent/green/above_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(rec2020 0.1 120% 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(rec2020 0.1 120% 0.3)); <===> percent/green/above_range/output.css a { @@ -131,8 +131,8 @@ a { <===> ================================================================================ <===> percent/green/below_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(rec2020 0.1 -20% 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(rec2020 0.1 -20% 0.3)); <===> percent/green/below_range/output.css a { @@ -143,8 +143,8 @@ a { <===> ================================================================================ <===> percent/blue/above_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(rec2020 0.1 0.2 130%)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(rec2020 0.1 0.2 130%)); <===> percent/blue/above_range/output.css a { @@ -155,8 +155,8 @@ a { <===> ================================================================================ <===> percent/blue/below_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(rec2020 0.1 0.2 -30%)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(rec2020 0.1 0.2 -30%)); <===> percent/blue/below_range/output.css a { diff --git a/spec/core_functions/color/color/spaces/srgb.hrx b/spec/core_functions/color/color/spaces/srgb.hrx index 6f3ac5d2e..a3f08c968 100644 --- a/spec/core_functions/color/color/spaces/srgb.hrx +++ b/spec/core_functions/color/color/spaces/srgb.hrx @@ -1,6 +1,6 @@ <===> unitless/in_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(srgb 0.1 0.2 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb 0.1 0.2 0.3)); <===> unitless/in_range/output.css a { @@ -11,8 +11,8 @@ a { <===> ================================================================================ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb 1.1 0.2 0.3)); <===> unitless/red/above_range/output.css a { @@ -23,8 +23,8 @@ a { <===> ================================================================================ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb -0.1 0.2 0.3)); <===> unitless/red/below_range/output.css a { @@ -35,8 +35,8 @@ a { <===> ================================================================================ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb 0.1 1.2 0.3)); <===> unitless/green/above_range/output.css a { @@ -47,8 +47,8 @@ a { <===> ================================================================================ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb 0.1 -0.2 0.3)); <===> unitless/green/below_range/output.css a { @@ -59,8 +59,8 @@ a { <===> ================================================================================ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb 0.1 0.2 1.3)); <===> unitless/blue/above_range/output.css a { @@ -71,8 +71,8 @@ a { <===> ================================================================================ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb 0.1 0.2 -0.3)); <===> unitless/blue/below_range/output.css a { @@ -83,8 +83,8 @@ a { <===> ================================================================================ <===> percent/in_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(srgb 10% 20% 30%)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb 10% 20% 30%)); <===> percent/in_range/output.css a { @@ -95,8 +95,8 @@ a { <===> ================================================================================ <===> percent/red/above_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(srgb 110% 0.2 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb 110% 0.2 0.3)); <===> percent/red/above_range/output.css a { @@ -107,8 +107,8 @@ a { <===> ================================================================================ <===> percent/red/below_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(srgb -10% 0.2 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb -10% 0.2 0.3)); <===> percent/red/below_range/output.css a { @@ -119,8 +119,8 @@ a { <===> ================================================================================ <===> percent/green/above_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(srgb 0.1 120% 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb 0.1 120% 0.3)); <===> percent/green/above_range/output.css a { @@ -131,8 +131,8 @@ a { <===> ================================================================================ <===> percent/green/below_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(srgb 0.1 -20% 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb 0.1 -20% 0.3)); <===> percent/green/below_range/output.css a { @@ -143,8 +143,8 @@ a { <===> ================================================================================ <===> percent/blue/above_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(srgb 0.1 0.2 130%)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb 0.1 0.2 130%)); <===> percent/blue/above_range/output.css a { @@ -155,8 +155,8 @@ a { <===> ================================================================================ <===> percent/blue/below_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(srgb 0.1 0.2 -30%)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb 0.1 0.2 -30%)); <===> percent/blue/below_range/output.css a { diff --git a/spec/core_functions/color/color/spaces/srgb_linear.hrx b/spec/core_functions/color/color/spaces/srgb_linear.hrx index 9bb3cea1c..17cf17786 100644 --- a/spec/core_functions/color/color/spaces/srgb_linear.hrx +++ b/spec/core_functions/color/color/spaces/srgb_linear.hrx @@ -1,6 +1,6 @@ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb-linear 0.1 0.2 0.3)); <===> unitless/in_range/output.css a { @@ -11,8 +11,8 @@ a { <===> ================================================================================ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb-linear 1.1 0.2 0.3)); <===> unitless/red/above_range/output.css a { @@ -23,8 +23,8 @@ a { <===> ================================================================================ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb-linear -0.1 0.2 0.3)); <===> unitless/red/below_range/output.css a { @@ -35,8 +35,8 @@ a { <===> ================================================================================ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb-linear 0.1 1.2 0.3)); <===> unitless/green/above_range/output.css a { @@ -47,8 +47,8 @@ a { <===> ================================================================================ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb-linear 0.1 -0.2 0.3)); <===> unitless/green/below_range/output.css a { @@ -59,8 +59,8 @@ a { <===> ================================================================================ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb-linear 0.1 0.2 1.3)); <===> unitless/blue/above_range/output.css a { @@ -71,8 +71,8 @@ a { <===> ================================================================================ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb-linear 0.1 0.2 -0.3)); <===> unitless/blue/below_range/output.css a { @@ -83,8 +83,8 @@ a { <===> ================================================================================ <===> percent/in_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(srgb-linear 10% 20% 30%)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb-linear 10% 20% 30%)); <===> percent/in_range/output.css a { @@ -95,8 +95,8 @@ a { <===> ================================================================================ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb-linear 110% 0.2 0.3)); <===> percent/red/above_range/output.css a { @@ -107,8 +107,8 @@ a { <===> ================================================================================ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb-linear -10% 0.2 0.3)); <===> percent/red/below_range/output.css a { @@ -119,8 +119,8 @@ a { <===> ================================================================================ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb-linear 0.1 120% 0.3)); <===> percent/green/above_range/output.css a { @@ -131,8 +131,8 @@ a { <===> ================================================================================ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb-linear 0.1 -20% 0.3)); <===> percent/green/below_range/output.css a { @@ -143,8 +143,8 @@ a { <===> ================================================================================ <===> 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%)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb-linear 0.1 0.2 130%)); <===> percent/blue/above_range/output.css a { @@ -155,8 +155,8 @@ a { <===> ================================================================================ <===> 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%)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb-linear 0.1 0.2 -30%)); <===> percent/blue/below_range/output.css a { diff --git a/spec/core_functions/color/color/spaces/xyz.hrx b/spec/core_functions/color/color/spaces/xyz.hrx index 8970c4532..2b534f40b 100644 --- a/spec/core_functions/color/color/spaces/xyz.hrx +++ b/spec/core_functions/color/color/spaces/xyz.hrx @@ -1,6 +1,6 @@ <===> unitless/in_range/input.scss -@use 'core_functions/color/color/xyz-utils'; -@include xyz-utils.inspect(color(xyz 0.1 0.2 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(xyz 0.1 0.2 0.3)); <===> unitless/in_range/output.css a { @@ -11,8 +11,8 @@ a { <===> ================================================================================ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(xyz 1.1 0.2 0.3)); <===> unitless/x/above_range/output.css a { @@ -23,8 +23,8 @@ a { <===> ================================================================================ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(xyz -0.1 0.2 0.3)); <===> unitless/x/below_range/output.css a { @@ -35,8 +35,8 @@ a { <===> ================================================================================ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(xyz 0.1 1.2 0.3)); <===> unitless/y/above_range/output.css a { @@ -47,8 +47,8 @@ a { <===> ================================================================================ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(xyz 0.1 -0.2 0.3)); <===> unitless/y/below_range/output.css a { @@ -59,8 +59,8 @@ a { <===> ================================================================================ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(xyz 0.1 0.2 1.3)); <===> unitless/z/above_range/output.css a { @@ -71,8 +71,8 @@ a { <===> ================================================================================ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(xyz 0.1 0.2 -0.3)); <===> unitless/z/below_range/output.css a { @@ -83,8 +83,8 @@ a { <===> ================================================================================ <===> percent/in_range/input.scss -@use 'core_functions/color/color/xyz-utils'; -@include xyz-utils.inspect(color(xyz 10% 20% 30%)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(xyz 10% 20% 30%)); <===> percent/in_range/output.css a { @@ -95,8 +95,8 @@ a { <===> ================================================================================ <===> percent/x/above_range/input.scss -@use 'core_functions/color/color/xyz-utils'; -@include xyz-utils.inspect(color(xyz 110% 0.2 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(xyz 110% 0.2 0.3)); <===> percent/x/above_range/output.css a { @@ -107,8 +107,8 @@ a { <===> ================================================================================ <===> percent/x/below_range/input.scss -@use 'core_functions/color/color/xyz-utils'; -@include xyz-utils.inspect(color(xyz -10% 0.2 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(xyz -10% 0.2 0.3)); <===> percent/x/below_range/output.css a { @@ -119,8 +119,8 @@ a { <===> ================================================================================ <===> percent/y/above_range/input.scss -@use 'core_functions/color/color/xyz-utils'; -@include xyz-utils.inspect(color(xyz 0.1 120% 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(xyz 0.1 120% 0.3)); <===> percent/y/above_range/output.css a { @@ -131,8 +131,8 @@ a { <===> ================================================================================ <===> percent/y/below_range/input.scss -@use 'core_functions/color/color/xyz-utils'; -@include xyz-utils.inspect(color(xyz 0.1 -20% 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(xyz 0.1 -20% 0.3)); <===> percent/y/below_range/output.css a { @@ -143,8 +143,8 @@ a { <===> ================================================================================ <===> percent/z/above_range/input.scss -@use 'core_functions/color/color/xyz-utils'; -@include xyz-utils.inspect(color(xyz 0.1 0.2 130%)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(xyz 0.1 0.2 130%)); <===> percent/z/above_range/output.css a { @@ -155,8 +155,8 @@ a { <===> ================================================================================ <===> percent/z/below_range/input.scss -@use 'core_functions/color/color/xyz-utils'; -@include xyz-utils.inspect(color(xyz 0.1 0.2 -30%)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(xyz 0.1 0.2 -30%)); <===> percent/z/below_range/output.css a { @@ -167,8 +167,8 @@ a { <===> ================================================================================ <===> xyz_d65/input.scss -@use 'core_functions/color/color/xyz-utils'; -@include xyz-utils.inspect(color(xyz-d65 0.1 0.2 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(xyz-d65 0.1 0.2 0.3)); <===> xyz_d65/output.css a { diff --git a/spec/core_functions/color/color/spaces/xyz_d50.hrx b/spec/core_functions/color/color/spaces/xyz_d50.hrx index f836ab16f..7646f2d1a 100644 --- a/spec/core_functions/color/color/spaces/xyz_d50.hrx +++ b/spec/core_functions/color/color/spaces/xyz_d50.hrx @@ -1,6 +1,6 @@ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(xyz-d50 0.1 0.2 0.3)); <===> unitless/in_range/output.css a { @@ -11,8 +11,8 @@ a { <===> ================================================================================ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(xyz-d50 1.1 0.2 0.3)); <===> unitless/x/above_range/output.css a { @@ -23,8 +23,8 @@ a { <===> ================================================================================ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(xyz-d50 -0.1 0.2 0.3)); <===> unitless/x/below_range/output.css a { @@ -35,8 +35,8 @@ a { <===> ================================================================================ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(xyz-d50 0.1 1.2 0.3)); <===> unitless/y/above_range/output.css a { @@ -47,8 +47,8 @@ a { <===> ================================================================================ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(xyz-d50 0.1 -0.2 0.3)); <===> unitless/y/below_range/output.css a { @@ -59,8 +59,8 @@ a { <===> ================================================================================ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(xyz-d50 0.1 0.2 1.3)); <===> unitless/z/above_range/output.css a { @@ -71,8 +71,8 @@ a { <===> ================================================================================ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(xyz-d50 0.1 0.2 -0.3)); <===> unitless/z/below_range/output.css a { @@ -83,8 +83,8 @@ a { <===> ================================================================================ <===> percent/in_range/input.scss -@use 'core_functions/color/color/xyz-utils'; -@include xyz-utils.inspect(color(xyz-d50 10% 20% 30%)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(xyz-d50 10% 20% 30%)); <===> percent/in_range/output.css a { @@ -95,8 +95,8 @@ a { <===> ================================================================================ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(xyz-d50 110% 0.2 0.3)); <===> percent/x/above_range/output.css a { @@ -107,8 +107,8 @@ a { <===> ================================================================================ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(xyz-d50 -10% 0.2 0.3)); <===> percent/x/below_range/output.css a { @@ -119,8 +119,8 @@ a { <===> ================================================================================ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(xyz-d50 0.1 120% 0.3)); <===> percent/y/above_range/output.css a { @@ -131,8 +131,8 @@ a { <===> ================================================================================ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(xyz-d50 0.1 -20% 0.3)); <===> percent/y/below_range/output.css a { @@ -143,8 +143,8 @@ a { <===> ================================================================================ <===> 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%)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(xyz-d50 0.1 0.2 130%)); <===> percent/z/above_range/output.css a { @@ -155,8 +155,8 @@ a { <===> ================================================================================ <===> 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%)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(xyz-d50 0.1 0.2 -30%)); <===> percent/z/below_range/output.css a { diff --git a/spec/core_functions/color/color/special_functions.hrx b/spec/core_functions/color/color/special_functions.hrx index c93bb051e..064c758ba 100644 --- a/spec/core_functions/color/color/special_functions.hrx +++ b/spec/core_functions/color/color/special_functions.hrx @@ -1,6 +1,6 @@ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb calc(1px + 1%) 0.2 0.3)); <===> calculation/arg_1/output.css a { @@ -11,8 +11,8 @@ a { <===> ================================================================================ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb 0.1 calc(1px + 1%) 0.3)); <===> calculation/arg_2/output.css a { @@ -23,8 +23,8 @@ a { <===> ================================================================================ <===> 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%))); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb 0.1 0.2 calc(1px + 1%))); <===> calculation/arg_3/output.css a { @@ -35,8 +35,8 @@ a { <===> ================================================================================ <===> 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%))); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb 0.1 0.2 0.3 / calc(1px + 1%))); <===> calculation/arg_4/output.css a { @@ -47,8 +47,8 @@ a { <===> ================================================================================ <===> var/arg_1/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(srgb var(--foo) 0.2 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb var(--foo) 0.2 0.3)); <===> var/arg_1/output.css a { @@ -59,8 +59,8 @@ a { <===> ================================================================================ <===> var/arg_2/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(srgb 0.1 var(--foo) 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb 0.1 var(--foo) 0.3)); <===> var/arg_2/output.css a { @@ -71,8 +71,8 @@ a { <===> ================================================================================ <===> var/arg_3/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(srgb 0.1 0.2 var(--foo))); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb 0.1 0.2 var(--foo))); <===> var/arg_3/output.css a { @@ -83,8 +83,8 @@ a { <===> ================================================================================ <===> 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))); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb 0.1 0.2 0.3 / var(--foo))); <===> var/arg_4/output.css a { @@ -96,8 +96,8 @@ a { ================================================================================ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb var(--foo) 0.3)); <===> multi_argument_var/1_of_2/output.css a { @@ -108,8 +108,8 @@ a { <===> ================================================================================ <===> 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))); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb 0.1 var(--foo))); <===> multi_argument_var/2_of_2/output.css a { @@ -120,8 +120,8 @@ a { <===> ================================================================================ <===> 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))); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb var(--foo))); <===> multi_argument_var/1_of_1/no_alpha/output.css a { @@ -132,8 +132,8 @@ a { <===> ================================================================================ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb var(--foo) / 0.4)); <===> multi_argument_var/1_of_1/alpha/output.css a { diff --git a/spec/core_functions/color/lab/_utils.scss b/spec/core_functions/color/lab/_utils.scss deleted file mode 100644 index 106fe41df..000000000 --- a/spec/core_functions/color/lab/_utils.scss +++ /dev/null @@ -1,27 +0,0 @@ -@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, 'a') - -real-channel($color, 'b'), - -real-channel($color, 'alpha') - ); - } - } -} diff --git a/spec/core_functions/color/lab/alpha.hrx b/spec/core_functions/color/lab/alpha.hrx index bdb10dcb9..787b8831a 100644 --- a/spec/core_functions/color/lab/alpha.hrx +++ b/spec/core_functions/color/lab/alpha.hrx @@ -1,5 +1,5 @@ <===> transparent/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(0 255 127 / 0)); <===> transparent/output.css @@ -11,7 +11,7 @@ a { <===> ================================================================================ <===> opaque/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 3 / 1)); <===> opaque/output.css @@ -23,7 +23,7 @@ a { <===> ================================================================================ <===> partial/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 3 / 0.4)); <===> partial/output.css @@ -35,7 +35,7 @@ a { <===> ================================================================================ <===> percent/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 3 / 40%)); <===> percent/output.css @@ -47,7 +47,7 @@ a { <===> ================================================================================ <===> named/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab($channels: 1% 2 3 / 0.4)); <===> named/output.css @@ -60,7 +60,7 @@ a { ================================================================================ <===> slash_list/input.scss @use "sass:list"; -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(list.slash(1% 2 3, 0.4))); <===> slash_list/output.css @@ -72,7 +72,7 @@ a { <===> ================================================================================ <===> none/slash/b/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 none / 0.4)); <===> none/slash/b/output.css @@ -84,7 +84,7 @@ a { <===> ================================================================================ <===> none/slash/alpha/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 3 / none)); <===> none/slash/alpha/output.css @@ -96,7 +96,7 @@ a { <===> ================================================================================ <===> none/slash/b_and_alpha/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 none / none)); <===> none/slash/b_and_alpha/output.css @@ -109,7 +109,7 @@ a { ================================================================================ <===> none/slash_list/b/input.scss @use 'sass:list'; -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(list.slash(1% 2 none, 0.4))); <===> none/slash_list/b/output.css @@ -122,7 +122,7 @@ a { ================================================================================ <===> none/slash_list/alpha/input.scss @use 'sass:list'; -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(list.slash(1% 2 3, none))); <===> none/slash_list/alpha/output.css @@ -135,7 +135,7 @@ a { ================================================================================ <===> none/slash_list/b_and_alpha/input.scss @use 'sass:list'; -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(list.slash(1% 2 none, none))); <===> none/slash_list/b_and_alpha/output.css diff --git a/spec/core_functions/color/lab/no_alpha.hrx b/spec/core_functions/color/lab/no_alpha.hrx index 69e193f4e..1131ea812 100644 --- a/spec/core_functions/color/lab/no_alpha.hrx +++ b/spec/core_functions/color/lab/no_alpha.hrx @@ -1,5 +1,5 @@ <===> unitless/ab/in_range/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 -3)); <===> unitless/ab/in_range/output.css @@ -11,7 +11,7 @@ a { <===> ================================================================================ <===> unitless/ab/above_range/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 126 300)); <===> unitless/ab/above_range/output.css @@ -23,7 +23,7 @@ a { <===> ================================================================================ <===> unitless/ab/below_range/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% -126 -300)); <===> unitless/ab/below_range/output.css @@ -35,7 +35,7 @@ a { <===> ================================================================================ <===> unitless/lightness/in_range/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(10 2 -3)); <===> unitless/lightness/in_range/output.css @@ -47,7 +47,7 @@ a { <===> ================================================================================ <===> unitless/lightness/above_range/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(101 2 3)); <===> unitless/lightness/above_range/output.css @@ -59,7 +59,7 @@ a { <===> ================================================================================ <===> unitless/lightness/below_range/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(-1 2 3)); <===> unitless/lightness/below_range/output.css @@ -71,7 +71,7 @@ a { <===> ================================================================================ <===> percent/ab/in_range/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2% -3%)); <===> percent/ab/in_range/output.css @@ -83,7 +83,7 @@ a { <===> ================================================================================ <===> percent/ab/above_range/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 101% 150%)); <===> percent/ab/above_range/output.css @@ -95,7 +95,7 @@ a { <===> ================================================================================ <===> percent/ab/below_range/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% -101% -150%)); <===> percent/ab/below_range/output.css @@ -107,7 +107,7 @@ a { <===> ================================================================================ <===> percent/lightness/in_range/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2% -3%)); <===> percent/lightness/in_range/output.css @@ -119,7 +119,7 @@ a { <===> ================================================================================ <===> percent/lightness/above_range/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(110% 2 3)); <===> percent/lightness/above_range/output.css @@ -131,7 +131,7 @@ a { <===> ================================================================================ <===> percent/lightness/below_range/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(-1% 2 3)); <===> percent/lightness/below_range/output.css @@ -143,7 +143,7 @@ a { <===> ================================================================================ <===> none/lightness/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(none 2 3)); <===> none/lightness/output.css @@ -155,7 +155,7 @@ a { <===> ================================================================================ <===> none/a/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% none 3)); <===> none/a/output.css @@ -167,7 +167,7 @@ a { <===> ================================================================================ <===> none/b/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 none)); <===> none/b/output.css @@ -179,7 +179,7 @@ a { <===> ================================================================================ <===> named/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab($channels: 1% 2 3)); <===> named/output.css diff --git a/spec/core_functions/color/lab/special_functions/alpha.hrx b/spec/core_functions/color/lab/special_functions/alpha.hrx index 85837f597..081d164f8 100644 --- a/spec/core_functions/color/lab/special_functions/alpha.hrx +++ b/spec/core_functions/color/lab/special_functions/alpha.hrx @@ -1,5 +1,5 @@ <===> calc/string/arg_1/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(unquote("calc(1%)") 2 3 / 0.4)); <===> calc/string/arg_1/output.css @@ -11,7 +11,7 @@ a { <===> ================================================================================ <===> calc/string/arg_2/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% unquote("calc(2)") 3 / 0.4)); <===> calc/string/arg_2/output.css @@ -23,7 +23,7 @@ a { <===> ================================================================================ <===> calc/string/arg_3/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 unquote("calc(3)") / 0.4)); <===> calc/string/arg_3/output.css @@ -35,7 +35,7 @@ a { <===> ================================================================================ <===> calc/string/arg_4/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 3 / unquote("calc(0.4)"))); <===> calc/string/arg_4/output.css @@ -47,7 +47,7 @@ a { <===> ================================================================================ <===> calc/calculation/arg_1/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(calc(1px + 1%) 2 3 / 0.4)); <===> calc/calculation/arg_1/output.css @@ -59,7 +59,7 @@ a { <===> ================================================================================ <===> calc/calculation/arg_2/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% calc(1px + 1%) 3 / 0.4)); <===> calc/calculation/arg_2/output.css @@ -71,7 +71,7 @@ a { <===> ================================================================================ <===> calc/calculation/arg_3/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 calc(1px + 1%) / 0.4)); <===> calc/calculation/arg_3/output.css @@ -83,7 +83,7 @@ a { <===> ================================================================================ <===> calc/calculation/arg_4/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 3 / calc(1px + 1%))); <===> calc/calculation/arg_4/output.css @@ -95,7 +95,7 @@ a { <===> ================================================================================ <===> var/arg_1/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(var(--foo) 2 3 / 0.4)); <===> var/arg_1/output.css @@ -107,7 +107,7 @@ a { <===> ================================================================================ <===> var/arg_2/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% var(--foo) 3 / 0.4)); <===> var/arg_2/output.css @@ -119,7 +119,7 @@ a { <===> ================================================================================ <===> var/arg_3/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 var(--foo) / 0.4)); <===> var/arg_3/output.css @@ -131,7 +131,7 @@ a { <===> ================================================================================ <===> var/arg_4/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 3 / var(--foo))); <===> var/arg_4/output.css @@ -143,7 +143,7 @@ a { <===> ================================================================================ <===> env/arg_1/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(env(--foo) 2 3 / 0.4)); <===> env/arg_1/output.css @@ -155,7 +155,7 @@ a { <===> ================================================================================ <===> env/arg_2/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% env(--foo) 3 / 0.4)); <===> env/arg_2/output.css @@ -167,7 +167,7 @@ a { <===> ================================================================================ <===> env/arg_3/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 env(--foo) / 0.4)); <===> env/arg_3/output.css @@ -179,7 +179,7 @@ a { <===> ================================================================================ <===> env/arg_4/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 3 / env(--foo))); <===> env/arg_4/output.css @@ -191,7 +191,7 @@ a { <===> ================================================================================ <===> min/string/arg_1/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(unquote("min(1%)") 2 3 / 0.4)); <===> min/string/arg_1/output.css @@ -203,7 +203,7 @@ a { <===> ================================================================================ <===> min/string/arg_2/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% unquote("min(2)") 3 / 0.4)); <===> min/string/arg_2/output.css @@ -215,7 +215,7 @@ a { <===> ================================================================================ <===> min/string/arg_3/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 unquote("min(3)") / 0.4)); <===> min/string/arg_3/output.css @@ -227,7 +227,7 @@ a { <===> ================================================================================ <===> min/string/arg_4/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 3 / unquote("min(0.4)"))); <===> min/string/arg_4/output.css @@ -239,7 +239,7 @@ a { <===> ================================================================================ <===> max/string/arg_1/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(unquote("max(1%)") 2 3 / 0.4)); <===> max/string/arg_1/output.css @@ -251,7 +251,7 @@ a { <===> ================================================================================ <===> max/string/arg_2/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% unquote("max(2)") 3 / 0.4)); <===> max/string/arg_2/output.css @@ -263,7 +263,7 @@ a { <===> ================================================================================ <===> max/string/arg_3/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 unquote("max(3)") / 0.4)); <===> max/string/arg_3/output.css @@ -275,7 +275,7 @@ a { <===> ================================================================================ <===> max/string/arg_4/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 3 / unquote("max(0.4)"))); <===> max/string/arg_4/output.css @@ -287,7 +287,7 @@ a { <===> ================================================================================ <===> clamp/string/arg_1/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(unquote("clamp(1%, 2, 3)") 2 3 / 0.4)); <===> clamp/string/arg_1/output.css @@ -299,7 +299,7 @@ a { <===> ================================================================================ <===> clamp/string/arg_2/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% unquote("clamp(2, 3, 4)") 3 / 0.4)); <===> clamp/string/arg_2/output.css @@ -311,7 +311,7 @@ a { <===> ================================================================================ <===> clamp/string/arg_3/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 unquote("clamp(3, 4, 5)") / 0.4)); <===> clamp/string/arg_3/output.css @@ -323,7 +323,7 @@ a { <===> ================================================================================ <===> clamp/string/arg_4/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 3 / unquote("clamp(0.4, 0.5, 0.6)"))); <===> clamp/string/arg_4/output.css @@ -335,7 +335,7 @@ a { <===> ================================================================================ <===> unknown/arg_3/with_number/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 b / 0.4)); <===> unknown/arg_3/with_number/output.css @@ -347,7 +347,7 @@ a { <===> ================================================================================ <===> unknown/arg_3/with_none/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 b / none)); <===> unknown/arg_3/with_none/output.css @@ -359,7 +359,7 @@ a { <===> ================================================================================ <===> unknown/arg_4/with_number/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 3 / b)); <===> unknown/arg_4/with_number/output.css @@ -371,7 +371,7 @@ a { <===> ================================================================================ <===> unknown/arg_4/with_none/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 none / b)); <===> unknown/arg_4/with_none/output.css @@ -383,7 +383,7 @@ a { <===> ================================================================================ <===> unknown/arg_3_and_4/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 b / c)); <===> unknown/arg_3_and_4/output.css @@ -396,7 +396,7 @@ a { ================================================================================ <===> multi_argument_var/1_of_2/input.scss // var() is substituted before parsing, so it may contain multiple arguments. -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(var(--foo) 2 / 0.4)); <===> multi_argument_var/1_of_2/output.css @@ -408,7 +408,7 @@ a { <===> ================================================================================ <===> multi_argument_var/2_of_2/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% var(--foo) / 0.4)); <===> multi_argument_var/2_of_2/output.css @@ -420,7 +420,7 @@ a { <===> ================================================================================ <===> multi_argument_var/1_of_1/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(var(--foo) / 0.4)); <===> multi_argument_var/1_of_1/output.css diff --git a/spec/core_functions/color/lab/special_functions/no_alpha.hrx b/spec/core_functions/color/lab/special_functions/no_alpha.hrx index c20e71040..8f461e641 100644 --- a/spec/core_functions/color/lab/special_functions/no_alpha.hrx +++ b/spec/core_functions/color/lab/special_functions/no_alpha.hrx @@ -1,5 +1,5 @@ <===> calc/string/arg_1/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(unquote("calc(1%)") 2 3)); <===> calc/string/arg_1/output.css @@ -11,7 +11,7 @@ a { <===> ================================================================================ <===> calc/string/arg_2/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% unquote("calc(2)") 3)); <===> calc/string/arg_2/output.css @@ -23,7 +23,7 @@ a { <===> ================================================================================ <===> calc/string/arg_3/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 unquote("calc(3)"))); <===> calc/string/arg_3/output.css @@ -35,7 +35,7 @@ a { <===> ================================================================================ <===> calc/calculation/arg_1/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(calc(1px + 1%) 2 3)); <===> calc/calculation/arg_1/output.css @@ -47,7 +47,7 @@ a { <===> ================================================================================ <===> calc/calculation/arg_2/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% calc(1px + 1%) 3)); <===> calc/calculation/arg_2/output.css @@ -59,7 +59,7 @@ a { <===> ================================================================================ <===> calc/calculation/arg_3/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 calc(1px + 1%))); <===> calc/calculation/arg_3/output.css @@ -71,7 +71,7 @@ a { <===> ================================================================================ <===> var/arg_1/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(var(--foo) 2 3)); <===> var/arg_1/output.css @@ -83,7 +83,7 @@ a { <===> ================================================================================ <===> var/arg_2/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% var(--foo) 3)); <===> var/arg_2/output.css @@ -95,7 +95,7 @@ a { <===> ================================================================================ <===> var/arg_3/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 var(--foo))); <===> var/arg_3/output.css @@ -107,7 +107,7 @@ a { <===> ================================================================================ <===> env/arg_1/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(env(--foo) 2 3)); <===> env/arg_1/output.css @@ -119,7 +119,7 @@ a { <===> ================================================================================ <===> env/arg_2/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% env(--foo) 3)); <===> env/arg_2/output.css @@ -131,7 +131,7 @@ a { <===> ================================================================================ <===> env/arg_3/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 env(--foo))); <===> env/arg_3/output.css @@ -143,7 +143,7 @@ a { <===> ================================================================================ <===> min/string/arg_1/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(unquote("min(1%)") 2 3)); <===> min/string/arg_1/output.css @@ -155,7 +155,7 @@ a { <===> ================================================================================ <===> min/string/arg_2/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% unquote("min(2)") 3)); <===> min/string/arg_2/output.css @@ -167,7 +167,7 @@ a { <===> ================================================================================ <===> min/string/arg_3/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 unquote("min(3)"))); <===> min/string/arg_3/output.css @@ -179,7 +179,7 @@ a { <===> ================================================================================ <===> max/string/arg_1/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(unquote("max(1%)") 2 3)); <===> max/string/arg_1/output.css @@ -191,7 +191,7 @@ a { <===> ================================================================================ <===> max/string/arg_2/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% unquote("max(2)") 3)); <===> max/string/arg_2/output.css @@ -203,7 +203,7 @@ a { <===> ================================================================================ <===> max/string/arg_3/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 unquote("max(3)"))); <===> max/string/arg_3/output.css @@ -215,7 +215,7 @@ a { <===> ================================================================================ <===> clamp/string/arg_1/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(unquote("clamp(1%, 2, 3)") 2 3)); <===> clamp/string/arg_1/output.css @@ -227,7 +227,7 @@ a { <===> ================================================================================ <===> clamp/string/arg_2/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% unquote("clamp(2, 3, 4)") 3)); <===> clamp/string/arg_2/output.css @@ -239,7 +239,7 @@ a { <===> ================================================================================ <===> clamp/string/arg_3/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 unquote("clamp(3, 4, 5)"))); <===> clamp/string/arg_3/output.css diff --git a/spec/core_functions/color/lab/special_functions/slash_list.hrx b/spec/core_functions/color/lab/special_functions/slash_list.hrx index f99a640c5..b3aace0b9 100644 --- a/spec/core_functions/color/lab/special_functions/slash_list.hrx +++ b/spec/core_functions/color/lab/special_functions/slash_list.hrx @@ -1,6 +1,6 @@ <===> channels/input.scss @use "sass:list"; -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(list.slash(var(--foo), 0.4))); <===> channels/output.css @@ -13,7 +13,7 @@ a { ================================================================================ <===> some_channels/input.scss @use "sass:list"; -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(list.slash(1% var(--foo), 0.4))); <===> some_channels/output.css @@ -26,7 +26,7 @@ a { ================================================================================ <===> alpha/input.scss @use "sass:list"; -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(list.slash(1% 2 3, var(--c)))); <===> alpha/output.css diff --git a/spec/core_functions/color/lch/_utils.scss b/spec/core_functions/color/lch/_utils.scss deleted file mode 100644 index 508c32e30..000000000 --- a/spec/core_functions/color/lch/_utils.scss +++ /dev/null @@ -1,27 +0,0 @@ -@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/lch/alpha.hrx b/spec/core_functions/color/lch/alpha.hrx index 170b7b0b6..48e469d7c 100644 --- a/spec/core_functions/color/lch/alpha.hrx +++ b/spec/core_functions/color/lch/alpha.hrx @@ -1,5 +1,5 @@ <===> transparent/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(1% 2 3deg / 0)); <===> transparent/output.css @@ -11,7 +11,7 @@ a { <===> ================================================================================ <===> opaque/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(1% 2 3deg / 1)); <===> opaque/output.css @@ -23,7 +23,7 @@ a { <===> ================================================================================ <===> partial/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(1% 2 3deg / 0.4)); <===> partial/output.css @@ -35,7 +35,7 @@ a { <===> ================================================================================ <===> percent/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(1% 2 3deg / 40%)); <===> percent/output.css @@ -47,7 +47,7 @@ a { <===> ================================================================================ <===> named/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch($channels: 1% 2 3deg / 0.4)); <===> named/output.css @@ -60,7 +60,7 @@ a { ================================================================================ <===> slash_list/input.scss @use "sass:list"; -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(list.slash(1% 2 3deg, 0.4))); <===> slash_list/output.css @@ -72,7 +72,7 @@ a { <===> ================================================================================ <===> none/slash/hue/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(1% 2 none / 0.4)); <===> none/slash/hue/output.css @@ -84,7 +84,7 @@ a { <===> ================================================================================ <===> none/slash/alpha/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(1% 2 3deg / none)); <===> none/slash/alpha/output.css @@ -97,7 +97,7 @@ a { ================================================================================ <===> none/slash_list/hue/input.scss @use 'sass:list'; -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(list.slash(1% 2 none, 0.4))); <===> none/slash_list/hue/output.css @@ -110,7 +110,7 @@ a { ================================================================================ <===> none/slash_list/alpha/input.scss @use 'sass:list'; -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(list.slash(1% 2 3deg, none))); <===> none/slash_list/alpha/output.css diff --git a/spec/core_functions/color/lch/no_alpha.hrx b/spec/core_functions/color/lch/no_alpha.hrx index 65fc7e78b..20a7051fb 100644 --- a/spec/core_functions/color/lch/no_alpha.hrx +++ b/spec/core_functions/color/lch/no_alpha.hrx @@ -1,5 +1,5 @@ <===> unitless/in_range/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(1 2 3deg)); <===> unitless/in_range/output.css @@ -11,7 +11,7 @@ a { <===> ================================================================================ <===> unitless/lightness/above_range/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(101 2 3deg)); <===> unitless/lightness/above_range/output.css @@ -23,7 +23,7 @@ a { <===> ================================================================================ <===> unitless/lightness/below_range/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(-1 2 3deg)); <===> unitless/lightness/below_range/output.css @@ -35,7 +35,7 @@ a { <===> ================================================================================ <===> unitless/chroma/above_range/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(1% 0.5 3deg)); <===> unitless/chroma/above_range/output.css @@ -47,7 +47,7 @@ a { <===> ================================================================================ <===> unitless/chroma/below_range/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(1% -0.1 3deg)); <===> unitless/chroma/below_range/output.css @@ -59,7 +59,7 @@ a { <===> ================================================================================ <===> unitless/hue/above_range/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(1% 2 361deg)); <===> unitless/hue/above_range/output.css @@ -71,7 +71,7 @@ a { <===> ================================================================================ <===> unitless/hue/below_range/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(1% 2 -1deg)); <===> unitless/hue/below_range/output.css @@ -83,7 +83,7 @@ a { <===> ================================================================================ <===> percent/in_range/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(1% 2% 3deg)); <===> percent/in_range/output.css @@ -95,7 +95,7 @@ a { <===> ================================================================================ <===> percent/lightness/above_range/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(110% 2 3deg)); <===> percent/lightness/above_range/output.css @@ -107,7 +107,7 @@ a { <===> ================================================================================ <===> percent/lightness/below_range/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(-1% 2 3deg)); <===> percent/lightness/below_range/output.css @@ -119,7 +119,7 @@ a { <===> ================================================================================ <===> percent/chroma/above_range/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(1% 101% 3deg)); <===> percent/chroma/above_range/output.css @@ -131,7 +131,7 @@ a { <===> ================================================================================ <===> percent/chroma/below_range/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(1% -1% 3deg)); <===> percent/chroma/below_range/output.css @@ -143,7 +143,7 @@ a { <===> ================================================================================ <===> none/lightness/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(none 2 3deg)); <===> none/lightness/output.css @@ -155,7 +155,7 @@ a { <===> ================================================================================ <===> none/chroma/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(1% none 3deg)); <===> none/chroma/output.css @@ -167,7 +167,7 @@ a { <===> ================================================================================ <===> none/hue/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(1% 2 none)); <===> none/hue/output.css @@ -179,7 +179,7 @@ a { <===> ================================================================================ <===> named/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch($channels: 1% 2 3deg)); <===> named/output.css diff --git a/spec/core_functions/color/lch/special_functions.hrx b/spec/core_functions/color/lch/special_functions.hrx index afcf9f813..dc2ff487b 100644 --- a/spec/core_functions/color/lch/special_functions.hrx +++ b/spec/core_functions/color/lch/special_functions.hrx @@ -1,5 +1,5 @@ <===> calculation/arg_1/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(calc(1px + 1%) 2 3deg)); <===> calculation/arg_1/output.css @@ -11,7 +11,7 @@ a { <===> ================================================================================ <===> calculation/arg_2/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(1% calc(1px + 1%) 3deg)); <===> calculation/arg_2/output.css @@ -23,7 +23,7 @@ a { <===> ================================================================================ <===> calculation/arg_3/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(1% 2 calc(1px + 1%))); <===> calculation/arg_3/output.css @@ -35,7 +35,7 @@ a { <===> ================================================================================ <===> calculation/arg_4/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(1% 2 3deg / calc(1px + 1%))); <===> calculation/arg_4/output.css @@ -47,7 +47,7 @@ a { <===> ================================================================================ <===> var/arg_1/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(var(--foo) 2 3deg)); <===> var/arg_1/output.css @@ -59,7 +59,7 @@ a { <===> ================================================================================ <===> var/arg_2/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(1% var(--foo) 3deg)); <===> var/arg_2/output.css @@ -71,7 +71,7 @@ a { <===> ================================================================================ <===> var/arg_3/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(1% 2 var(--foo))); <===> var/arg_3/output.css @@ -83,7 +83,7 @@ a { <===> ================================================================================ <===> var/arg_4/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(1% 2 3deg / var(--foo))); <===> var/arg_4/output.css @@ -96,7 +96,7 @@ a { ================================================================================ <===> 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'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(var(--foo) 2deg)); <===> multi_argument_var/1_of_2/output.css @@ -108,7 +108,7 @@ a { <===> ================================================================================ <===> multi_argument_var/2_of_2/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(1% var(--foo))); <===> multi_argument_var/2_of_2/output.css @@ -120,7 +120,7 @@ a { <===> ================================================================================ <===> multi_argument_var/1_of_1/no_alpha/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(var(--foo))); <===> multi_argument_var/1_of_1/no_alpha/output.css @@ -132,7 +132,7 @@ a { <===> ================================================================================ <===> multi_argument_var/1_of_1/alpha/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(var(--foo) / 0.4)); <===> multi_argument_var/1_of_1/alpha/output.css diff --git a/spec/core_functions/color/oklab/_utils.scss b/spec/core_functions/color/oklab/_utils.scss deleted file mode 100644 index 106fe41df..000000000 --- a/spec/core_functions/color/oklab/_utils.scss +++ /dev/null @@ -1,27 +0,0 @@ -@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, 'a') - -real-channel($color, 'b'), - -real-channel($color, 'alpha') - ); - } - } -} diff --git a/spec/core_functions/color/oklab/alpha.hrx b/spec/core_functions/color/oklab/alpha.hrx index 6ff6a6287..9a00b4ff8 100644 --- a/spec/core_functions/color/oklab/alpha.hrx +++ b/spec/core_functions/color/oklab/alpha.hrx @@ -1,5 +1,5 @@ <===> transparent/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(0 255 127 / 0)); <===> transparent/output.css @@ -11,7 +11,7 @@ a { <===> ================================================================================ <===> opaque/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(1% 2 3 / 1)); <===> opaque/output.css @@ -23,7 +23,7 @@ a { <===> ================================================================================ <===> partial/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(1% 2 3 / 0.4)); <===> partial/output.css @@ -35,7 +35,7 @@ a { <===> ================================================================================ <===> percent/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(1% 2 3 / 40%)); <===> percent/output.css @@ -47,7 +47,7 @@ a { <===> ================================================================================ <===> named/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab($channels: 1% 2 3 / 0.4)); <===> named/output.css @@ -60,7 +60,7 @@ a { ================================================================================ <===> slash_list/input.scss @use "sass:list"; -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(list.slash(1% 2 3, 0.4))); <===> slash_list/output.css @@ -72,7 +72,7 @@ a { <===> ================================================================================ <===> none/slash/b/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(1% 2 none / 0.4)); <===> none/slash/b/output.css @@ -84,7 +84,7 @@ a { <===> ================================================================================ <===> none/slash/alpha/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(1% 2 3 / none)); <===> none/slash/alpha/output.css @@ -97,7 +97,7 @@ a { ================================================================================ <===> none/slash_list/b/input.scss @use 'sass:list'; -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(list.slash(1% 2 none, 0.4))); <===> none/slash_list/b/output.css @@ -110,7 +110,7 @@ a { ================================================================================ <===> none/slash_list/alpha/input.scss @use 'sass:list'; -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(list.slash(1% 2 3, none))); <===> none/slash_list/alpha/output.css @@ -122,7 +122,7 @@ a { <===> ================================================================================ <===> relative_color/slash/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(from #aaa l a b / 25%)); <===> relative_color/slash/output.css @@ -135,7 +135,7 @@ a { ================================================================================ <===> relative_color/slash_list/input.scss @use 'sass:list'; -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(list.slash(from #aaa l a b, 25%))); <===> relative_color/slash_list/output.css diff --git a/spec/core_functions/color/oklab/no_alpha.hrx b/spec/core_functions/color/oklab/no_alpha.hrx index ffd32248d..571a8a5b6 100644 --- a/spec/core_functions/color/oklab/no_alpha.hrx +++ b/spec/core_functions/color/oklab/no_alpha.hrx @@ -1,5 +1,5 @@ <===> unitless/ab/in_range/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(1% 2 -3)); <===> unitless/ab/in_range/output.css @@ -11,7 +11,7 @@ a { <===> ================================================================================ <===> unitless/ab/above_range/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(1% 126 300)); <===> unitless/ab/above_range/output.css @@ -23,7 +23,7 @@ a { <===> ================================================================================ <===> unitless/ab/below_range/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(1% -126 -300)); <===> unitless/ab/below_range/output.css @@ -35,7 +35,7 @@ a { <===> ================================================================================ <===> unitless/lightness/in_range/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(0.1 2 -3)); <===> unitless/lightness/in_range/output.css @@ -47,7 +47,7 @@ a { <===> ================================================================================ <===> unitless/lightness/above_range/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(1.1 2 3)); <===> unitless/lightness/above_range/output.css @@ -59,7 +59,7 @@ a { <===> ================================================================================ <===> unitless/lightness/below_range/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(-0.1 2 3)); <===> unitless/lightness/below_range/output.css @@ -71,7 +71,7 @@ a { <===> ================================================================================ <===> percent/ab/in_range/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(1% 2% -3%)); <===> percent/ab/in_range/output.css @@ -83,7 +83,7 @@ a { <===> ================================================================================ <===> percent/ab/above_range/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(1% 101% 150%)); <===> percent/ab/above_range/output.css @@ -95,7 +95,7 @@ a { <===> ================================================================================ <===> percent/ab/below_range/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(1% -101% -150%)); <===> percent/ab/below_range/output.css @@ -107,7 +107,7 @@ a { <===> ================================================================================ <===> percent/lightness/in_range/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(1% 2% -3%)); <===> percent/lightness/in_range/output.css @@ -119,7 +119,7 @@ a { <===> ================================================================================ <===> percent/lightness/above_range/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(110% 2 3)); <===> percent/lightness/above_range/output.css @@ -131,7 +131,7 @@ a { <===> ================================================================================ <===> percent/lightness/below_range/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(-1% 2 3)); <===> percent/lightness/below_range/output.css @@ -143,7 +143,7 @@ a { <===> ================================================================================ <===> none/lightness/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(none 2 3)); <===> none/lightness/output.css @@ -155,7 +155,7 @@ a { <===> ================================================================================ <===> none/a/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(1% none 3)); <===> none/a/output.css @@ -167,7 +167,7 @@ a { <===> ================================================================================ <===> none/b/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(1% 2 none)); <===> none/b/output.css @@ -179,7 +179,7 @@ a { <===> ================================================================================ <===> relative_color/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(from #aaa l a b)); <===> relative_color/output.css @@ -191,7 +191,7 @@ a { <===> ================================================================================ <===> named/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab($channels: 1% 2 3)); <===> named/output.css diff --git a/spec/core_functions/color/oklab/special_functions.hrx b/spec/core_functions/color/oklab/special_functions.hrx index 089f5057f..16f4e4ebe 100644 --- a/spec/core_functions/color/oklab/special_functions.hrx +++ b/spec/core_functions/color/oklab/special_functions.hrx @@ -1,5 +1,5 @@ <===> calculation/arg_1/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(calc(1px + 1%) 2 3)); <===> calculation/arg_1/output.css @@ -11,7 +11,7 @@ a { <===> ================================================================================ <===> calculation/arg_2/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(1% calc(1px + 1%) 3)); <===> calculation/arg_2/output.css @@ -23,7 +23,7 @@ a { <===> ================================================================================ <===> calculation/arg_3/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(1% 2 calc(1px + 1%))); <===> calculation/arg_3/output.css @@ -35,7 +35,7 @@ a { <===> ================================================================================ <===> calculation/arg_4/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(1% 2 3 / calc(1px + 1%))); <===> calculation/arg_4/output.css @@ -47,7 +47,7 @@ a { <===> ================================================================================ <===> var/arg_1/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(var(--foo) 2 3)); <===> var/arg_1/output.css @@ -59,7 +59,7 @@ a { <===> ================================================================================ <===> var/arg_2/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(1% var(--foo) 3)); <===> var/arg_2/output.css @@ -71,7 +71,7 @@ a { <===> ================================================================================ <===> var/arg_3/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(1% 2 var(--foo))); <===> var/arg_3/output.css @@ -83,7 +83,7 @@ a { <===> ================================================================================ <===> var/arg_4/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(1% 2 3 / var(--foo))); <===> var/arg_4/output.css @@ -96,7 +96,7 @@ a { ================================================================================ <===> multi_argument_var/1_of_2/input.scss // var() is substituted before parsing, so it may contain multiple arguments. -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(var(--foo) 2)); <===> multi_argument_var/1_of_2/output.css @@ -108,7 +108,7 @@ a { <===> ================================================================================ <===> multi_argument_var/2_of_2/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(1% var(--foo))); <===> multi_argument_var/2_of_2/output.css @@ -120,7 +120,7 @@ a { <===> ================================================================================ <===> multi_argument_var/1_of_1/no_alpha/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(var(--foo))); <===> multi_argument_var/1_of_1/no_alpha/output.css @@ -132,7 +132,7 @@ a { <===> ================================================================================ <===> multi_argument_var/1_of_1/alpha/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(var(--foo) / 0.4)); <===> multi_argument_var/1_of_1/alpha/output.css diff --git a/spec/core_functions/color/oklch/_utils.scss b/spec/core_functions/color/oklch/_utils.scss deleted file mode 100644 index 508c32e30..000000000 --- a/spec/core_functions/color/oklch/_utils.scss +++ /dev/null @@ -1,27 +0,0 @@ -@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 index acb10b5a4..31aa9aeb4 100644 --- a/spec/core_functions/color/oklch/alpha.hrx +++ b/spec/core_functions/color/oklch/alpha.hrx @@ -1,5 +1,5 @@ <===> transparent/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(1% 0.2 3deg / 0)); <===> transparent/output.css @@ -11,7 +11,7 @@ a { <===> ================================================================================ <===> opaque/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(1% 0.2 3deg / 1)); <===> opaque/output.css @@ -23,7 +23,7 @@ a { <===> ================================================================================ <===> partial/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(1% 0.2 3deg / 0.4)); <===> partial/output.css @@ -35,7 +35,7 @@ a { <===> ================================================================================ <===> percent/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(1% 0.2 3deg / 40%)); <===> percent/output.css @@ -47,7 +47,7 @@ a { <===> ================================================================================ <===> named/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch($channels: 1% 0.2 3deg / 0.4)); <===> named/output.css @@ -60,7 +60,7 @@ a { ================================================================================ <===> slash_list/input.scss @use "sass:list"; -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(list.slash(1% 0.2 3deg, 0.4))); <===> slash_list/output.css @@ -72,7 +72,7 @@ a { <===> ================================================================================ <===> none/slash/hue/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(1% 0.2 none / 0.4)); <===> none/slash/hue/output.css @@ -84,7 +84,7 @@ a { <===> ================================================================================ <===> none/slash/alpha/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(1% 0.2 3deg / none)); <===> none/slash/alpha/output.css @@ -97,7 +97,7 @@ a { ================================================================================ <===> none/slash_list/hue/input.scss @use 'sass:list'; -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(list.slash(1% 0.2 none, 0.4))); <===> none/slash_list/hue/output.css @@ -110,7 +110,7 @@ a { ================================================================================ <===> none/slash_list/alpha/input.scss @use 'sass:list'; -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(list.slash(1% 0.2 3deg, none))); <===> none/slash_list/alpha/output.css diff --git a/spec/core_functions/color/oklch/no_alpha.hrx b/spec/core_functions/color/oklch/no_alpha.hrx index 9b24e8e78..f8daef211 100644 --- a/spec/core_functions/color/oklch/no_alpha.hrx +++ b/spec/core_functions/color/oklch/no_alpha.hrx @@ -1,5 +1,5 @@ <===> unitless/in_range/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(0.1 0.2 3deg)); <===> unitless/in_range/output.css @@ -11,7 +11,7 @@ a { <===> ================================================================================ <===> unitless/lightness/above_range/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(1.1 0.2 3deg)); <===> unitless/lightness/above_range/output.css @@ -23,7 +23,7 @@ a { <===> ================================================================================ <===> unitless/lightness/below_range/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(-0.1 0.2 3deg)); <===> unitless/lightness/below_range/output.css @@ -35,7 +35,7 @@ a { <===> ================================================================================ <===> unitless/chroma/above_range/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(1% 0.5 3deg)); <===> unitless/chroma/above_range/output.css @@ -47,7 +47,7 @@ a { <===> ================================================================================ <===> unitless/chroma/below_range/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(1% -0.1 3deg)); <===> unitless/chroma/below_range/output.css @@ -59,7 +59,7 @@ a { <===> ================================================================================ <===> unitless/hue/above_range/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(1% 0.2 361deg)); <===> unitless/hue/above_range/output.css @@ -71,7 +71,7 @@ a { <===> ================================================================================ <===> unitless/hue/below_range/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(1% 0.2 -1deg)); <===> unitless/hue/below_range/output.css @@ -83,7 +83,7 @@ a { <===> ================================================================================ <===> percent/in_range/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(1% 2% 3deg)); <===> percent/in_range/output.css @@ -95,7 +95,7 @@ a { <===> ================================================================================ <===> percent/lightness/above_range/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(110% 0.2 3deg)); <===> percent/lightness/above_range/output.css @@ -107,7 +107,7 @@ a { <===> ================================================================================ <===> percent/lightness/below_range/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(-1% 0.2 3deg)); <===> percent/lightness/below_range/output.css @@ -119,7 +119,7 @@ a { <===> ================================================================================ <===> percent/chroma/above_range/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(1% 101% 3deg)); <===> percent/chroma/above_range/output.css @@ -131,7 +131,7 @@ a { <===> ================================================================================ <===> percent/chroma/below_range/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(1% -1% 3deg)); <===> percent/chroma/below_range/output.css @@ -143,7 +143,7 @@ a { <===> ================================================================================ <===> none/lightness/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(none 0.2 3deg)); <===> none/lightness/output.css @@ -155,7 +155,7 @@ a { <===> ================================================================================ <===> none/chroma/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(1% none 3deg)); <===> none/chroma/output.css @@ -167,7 +167,7 @@ a { <===> ================================================================================ <===> none/hue/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(1% 0.2 none)); <===> none/hue/output.css @@ -179,7 +179,7 @@ a { <===> ================================================================================ <===> named/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch($channels: 1% 0.2 3deg)); <===> named/output.css diff --git a/spec/core_functions/color/oklch/special_functions.hrx b/spec/core_functions/color/oklch/special_functions.hrx index 8955526c4..60100e9e3 100644 --- a/spec/core_functions/color/oklch/special_functions.hrx +++ b/spec/core_functions/color/oklch/special_functions.hrx @@ -1,5 +1,5 @@ <===> calculation/arg_1/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(calc(1px + 1%) 0.2 3deg)); <===> calculation/arg_1/output.css @@ -11,7 +11,7 @@ a { <===> ================================================================================ <===> calculation/arg_2/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(1% calc(1px + 1%) 3deg)); <===> calculation/arg_2/output.css @@ -23,7 +23,7 @@ a { <===> ================================================================================ <===> calculation/arg_3/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(1% 0.2 calc(1px + 1%))); <===> calculation/arg_3/output.css @@ -35,7 +35,7 @@ a { <===> ================================================================================ <===> calculation/arg_4/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(1% 0.2 3deg / calc(1px + 1%))); <===> calculation/arg_4/output.css @@ -47,7 +47,7 @@ a { <===> ================================================================================ <===> var/arg_1/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(var(--foo) 0.2 3deg)); <===> var/arg_1/output.css @@ -59,7 +59,7 @@ a { <===> ================================================================================ <===> var/arg_2/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(1% var(--foo) 3deg)); <===> var/arg_2/output.css @@ -71,7 +71,7 @@ a { <===> ================================================================================ <===> var/arg_3/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(1% 0.2 var(--foo))); <===> var/arg_3/output.css @@ -83,7 +83,7 @@ a { <===> ================================================================================ <===> var/arg_4/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(1% 0.2 3deg / var(--foo))); <===> var/arg_4/output.css @@ -96,7 +96,7 @@ a { ================================================================================ <===> 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'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(var(--foo) 2deg)); <===> multi_argument_var/1_of_2/output.css @@ -108,7 +108,7 @@ a { <===> ================================================================================ <===> multi_argument_var/2_of_2/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(1% var(--foo))); <===> multi_argument_var/2_of_2/output.css @@ -120,7 +120,7 @@ a { <===> ================================================================================ <===> multi_argument_var/1_of_1/no_alpha/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(var(--foo))); <===> multi_argument_var/1_of_1/no_alpha/output.css @@ -132,7 +132,7 @@ a { <===> ================================================================================ <===> multi_argument_var/1_of_1/alpha/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(var(--foo) / 0.4)); <===> multi_argument_var/1_of_1/alpha/output.css From 6dc0063452443b3e1fc94e9e3a30328aa58448c3 Mon Sep 17 00:00:00 2001 From: Natalie Weizenbaum Date: Tue, 10 Oct 2023 16:30:42 -0700 Subject: [PATCH 02/18] Include color space in utils.inspect() output --- spec/core_functions/color/_utils.scss | 1 + spec/core_functions/color/color/alpha.hrx | 10 ++++++++++ spec/core_functions/color/color/no_alpha.hrx | 5 +++++ .../color/color/spaces/a98_rgb.hrx | 14 ++++++++++++++ .../color/color/spaces/display_p3.hrx | 14 ++++++++++++++ .../color/color/spaces/prophoto_rgb.hrx | 14 ++++++++++++++ .../color/color/spaces/rec2020.hrx | 14 ++++++++++++++ spec/core_functions/color/color/spaces/srgb.hrx | 14 ++++++++++++++ .../color/color/spaces/srgb_linear.hrx | 14 ++++++++++++++ spec/core_functions/color/color/spaces/xyz.hrx | 15 +++++++++++++++ .../color/color/spaces/xyz_d50.hrx | 14 ++++++++++++++ spec/core_functions/color/lab/alpha.hrx | 12 ++++++++++++ spec/core_functions/color/lab/no_alpha.hrx | 16 ++++++++++++++++ spec/core_functions/color/lch/alpha.hrx | 10 ++++++++++ spec/core_functions/color/lch/no_alpha.hrx | 16 ++++++++++++++++ spec/core_functions/color/oklab/alpha.hrx | 10 ++++++++++ spec/core_functions/color/oklab/no_alpha.hrx | 16 ++++++++++++++++ spec/core_functions/color/oklch/alpha.hrx | 10 ++++++++++ spec/core_functions/color/oklch/no_alpha.hrx | 16 ++++++++++++++++ 19 files changed, 235 insertions(+) diff --git a/spec/core_functions/color/_utils.scss b/spec/core_functions/color/_utils.scss index 62a7b81bb..375c314cf 100644 --- a/spec/core_functions/color/_utils.scss +++ b/spec/core_functions/color/_utils.scss @@ -17,6 +17,7 @@ type: string; } @else { $space: color.space($color); + space: $space; @if $space == 'rgb' or $space == 'srgb' or $space == 'srgb-linear' or $space == 'display-p3' or $space == 'a98-rgb' or diff --git a/spec/core_functions/color/color/alpha.hrx b/spec/core_functions/color/color/alpha.hrx index 0fff380a6..b66231103 100644 --- a/spec/core_functions/color/color/alpha.hrx +++ b/spec/core_functions/color/color/alpha.hrx @@ -5,6 +5,7 @@ <===> transparent/output.css a { value: color(srgb 0.1 0.2 0.3 / 0); + space: srgb; channels: 0.1 0.2 0.3 / 0; } @@ -17,6 +18,7 @@ a { <===> opaque/output.css a { value: color(srgb 0.1 0.2 0.3); + space: srgb; channels: 0.1 0.2 0.3 / 1; } @@ -29,6 +31,7 @@ a { <===> partial/output.css a { value: color(srgb 0.1 0.2 0.3 / 0.4); + space: srgb; channels: 0.1 0.2 0.3 / 0.4; } @@ -41,6 +44,7 @@ a { <===> percent/output.css a { value: color(srgb 0.1 0.2 0.3 / 0.4); + space: srgb; channels: 0.1 0.2 0.3 / 0.4; } @@ -53,6 +57,7 @@ a { <===> named/output.css a { value: color(srgb 0.1 0.2 0.3 / 0.4); + space: srgb; channels: 0.1 0.2 0.3 / 0.4; } @@ -66,6 +71,7 @@ a { <===> slash_list/output.css a { value: color(srgb 0.1 0.2 0.3 / 0.4); + space: srgb; channels: 0.1 0.2 0.3 / 0.4; } @@ -78,6 +84,7 @@ a { <===> none/slash/blue/output.css a { value: color(srgb 0.1 0.2 none / 0.4); + space: srgb; channels: 0.1 0.2 none / 0.4; } @@ -90,6 +97,7 @@ a { <===> none/slash/alpha/output.css a { value: color(srgb 0.1 0.2 0.3 / none); + space: srgb; channels: 0.1 0.2 0.3 / none; } @@ -103,6 +111,7 @@ a { <===> none/slash_list/blue/output.css a { value: color(srgb 0.1 0.2 none / 0.4); + space: srgb; channels: 0.1 0.2 none / 0.4; } @@ -116,6 +125,7 @@ a { <===> none/slash_list/alpha/output.css a { value: color(srgb 0.1 0.2 0.3 / none); + space: srgb; channels: 0.1 0.2 0.3 / none; } diff --git a/spec/core_functions/color/color/no_alpha.hrx b/spec/core_functions/color/color/no_alpha.hrx index d7caf15f4..f5318ef2d 100644 --- a/spec/core_functions/color/color/no_alpha.hrx +++ b/spec/core_functions/color/color/no_alpha.hrx @@ -5,6 +5,7 @@ <===> none/red/output.css a { value: color(srgb none 0.2 0.3); + space: srgb; channels: none 0.2 0.3 / 1; } @@ -17,6 +18,7 @@ a { <===> none/green/output.css a { value: color(srgb 0.1 none 0.3); + space: srgb; channels: 0.1 none 0.3 / 1; } @@ -29,6 +31,7 @@ a { <===> none/blue/output.css a { value: color(srgb 0.1 none 0.3); + space: srgb; channels: 0.1 none 0.3 / 1; } @@ -41,6 +44,7 @@ a { <===> case/output.css a { value: color(srgb 0.1 none 0.3); + space: srgb; channels: 0.1 none 0.3 / 1; } @@ -65,5 +69,6 @@ a { <===> named/output.css a { value: color(srgb 0.1 0.2 0.3); + space: srgb; channels: 0.1 0.2 0.3 / 1; } diff --git a/spec/core_functions/color/color/spaces/a98_rgb.hrx b/spec/core_functions/color/color/spaces/a98_rgb.hrx index 37c7fb04b..877efcd52 100644 --- a/spec/core_functions/color/color/spaces/a98_rgb.hrx +++ b/spec/core_functions/color/color/spaces/a98_rgb.hrx @@ -5,6 +5,7 @@ <===> unitless/in_range/output.css a { value: color(a98-rgb 0.1 0.2 0.3); + space: a98-rgb; channels: 0.1 0.2 0.3 / 1; } @@ -17,6 +18,7 @@ a { <===> unitless/red/above_range/output.css a { value: color(a98-rgb 1.1 0.2 0.3); + space: a98-rgb; channels: 1.1 0.2 0.3 / 1; } @@ -29,6 +31,7 @@ a { <===> unitless/red/below_range/output.css a { value: color(a98-rgb -0.1 0.2 0.3); + space: a98-rgb; channels: -0.1 0.2 0.3 / 1; } @@ -41,6 +44,7 @@ a { <===> unitless/green/above_range/output.css a { value: color(a98-rgb 0.1 1.2 0.3); + space: a98-rgb; channels: 0.1 1.2 0.3 / 1; } @@ -53,6 +57,7 @@ a { <===> unitless/green/below_range/output.css a { value: color(a98-rgb 0.1 -0.2 0.3); + space: a98-rgb; channels: 0.1 -0.2 0.3 / 1; } @@ -65,6 +70,7 @@ a { <===> unitless/blue/above_range/output.css a { value: color(a98-rgb 0.1 0.2 1.3); + space: a98-rgb; channels: 0.1 0.2 1.3 / 1; } @@ -77,6 +83,7 @@ a { <===> unitless/blue/below_range/output.css a { value: color(a98-rgb 0.1 0.2 -0.3); + space: a98-rgb; channels: 0.1 0.2 -0.3 / 1; } @@ -89,6 +96,7 @@ a { <===> percent/in_range/output.css a { value: color(a98-rgb 0.1 0.2 0.3); + space: a98-rgb; channels: 0.1 0.2 0.3 / 1; } @@ -101,6 +109,7 @@ a { <===> percent/red/above_range/output.css a { value: color(a98-rgb 1.1 0.2 0.3); + space: a98-rgb; channels: 1.1 0.2 0.3 / 1; } @@ -113,6 +122,7 @@ a { <===> percent/red/below_range/output.css a { value: color(a98-rgb -0.1 0.2 0.3); + space: a98-rgb; channels: -0.1 0.2 0.3 / 1; } @@ -125,6 +135,7 @@ a { <===> percent/green/above_range/output.css a { value: color(a98-rgb 0.1 1.2 0.3); + space: a98-rgb; channels: 0.1 1.2 0.3 / 1; } @@ -137,6 +148,7 @@ a { <===> percent/green/below_range/output.css a { value: color(a98-rgb 0.1 -0.2 0.3); + space: a98-rgb; channels: 0.1 -0.2 0.3 / 1; } @@ -149,6 +161,7 @@ a { <===> percent/blue/above_range/output.css a { value: color(a98-rgb 0.1 0.2 1.3); + space: a98-rgb; channels: 0.1 0.2 1.3 / 1; } @@ -161,5 +174,6 @@ a { <===> percent/blue/below_range/output.css a { value: color(a98-rgb 0.1 0.2 -0.3); + space: a98-rgb; 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 index f2886cd84..91c495833 100644 --- a/spec/core_functions/color/color/spaces/display_p3.hrx +++ b/spec/core_functions/color/color/spaces/display_p3.hrx @@ -5,6 +5,7 @@ <===> unitless/in_range/output.css a { value: color(display-p3 0.1 0.2 0.3); + space: display-p3; channels: 0.1 0.2 0.3 / 1; } @@ -17,6 +18,7 @@ a { <===> unitless/red/above_range/output.css a { value: color(display-p3 1.1 0.2 0.3); + space: display-p3; channels: 1.1 0.2 0.3 / 1; } @@ -29,6 +31,7 @@ a { <===> unitless/red/below_range/output.css a { value: color(display-p3 -0.1 0.2 0.3); + space: display-p3; channels: -0.1 0.2 0.3 / 1; } @@ -41,6 +44,7 @@ a { <===> unitless/green/above_range/output.css a { value: color(display-p3 0.1 1.2 0.3); + space: display-p3; channels: 0.1 1.2 0.3 / 1; } @@ -53,6 +57,7 @@ a { <===> unitless/green/below_range/output.css a { value: color(display-p3 0.1 -0.2 0.3); + space: display-p3; channels: 0.1 -0.2 0.3 / 1; } @@ -65,6 +70,7 @@ a { <===> unitless/blue/above_range/output.css a { value: color(display-p3 0.1 0.2 1.3); + space: display-p3; channels: 0.1 0.2 1.3 / 1; } @@ -77,6 +83,7 @@ a { <===> unitless/blue/below_range/output.css a { value: color(display-p3 0.1 0.2 -0.3); + space: display-p3; channels: 0.1 0.2 -0.3 / 1; } @@ -89,6 +96,7 @@ a { <===> percent/in_range/output.css a { value: color(display-p3 0.1 0.2 0.3); + space: display-p3; channels: 0.1 0.2 0.3 / 1; } @@ -101,6 +109,7 @@ a { <===> percent/red/above_range/output.css a { value: color(display-p3 1.1 0.2 0.3); + space: display-p3; channels: 1.1 0.2 0.3 / 1; } @@ -113,6 +122,7 @@ a { <===> percent/red/below_range/output.css a { value: color(display-p3 -0.1 0.2 0.3); + space: display-p3; channels: -0.1 0.2 0.3 / 1; } @@ -125,6 +135,7 @@ a { <===> percent/green/above_range/output.css a { value: color(display-p3 0.1 1.2 0.3); + space: display-p3; channels: 0.1 1.2 0.3 / 1; } @@ -137,6 +148,7 @@ a { <===> percent/green/below_range/output.css a { value: color(display-p3 0.1 -0.2 0.3); + space: display-p3; channels: 0.1 -0.2 0.3 / 1; } @@ -149,6 +161,7 @@ a { <===> percent/blue/above_range/output.css a { value: color(display-p3 0.1 0.2 1.3); + space: display-p3; channels: 0.1 0.2 1.3 / 1; } @@ -161,5 +174,6 @@ a { <===> percent/blue/below_range/output.css a { value: color(display-p3 0.1 0.2 -0.3); + space: display-p3; 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 index afd206b65..67750f549 100644 --- a/spec/core_functions/color/color/spaces/prophoto_rgb.hrx +++ b/spec/core_functions/color/color/spaces/prophoto_rgb.hrx @@ -5,6 +5,7 @@ <===> unitless/in_range/output.css a { value: color(prophoto-rgb 0.1 0.2 0.3); + space: prophoto-rgb; channels: 0.1 0.2 0.3 / 1; } @@ -17,6 +18,7 @@ a { <===> unitless/red/above_range/output.css a { value: color(prophoto-rgb 1.1 0.2 0.3); + space: prophoto-rgb; channels: 1.1 0.2 0.3 / 1; } @@ -29,6 +31,7 @@ a { <===> unitless/red/below_range/output.css a { value: color(prophoto-rgb -0.1 0.2 0.3); + space: prophoto-rgb; channels: -0.1 0.2 0.3 / 1; } @@ -41,6 +44,7 @@ a { <===> unitless/green/above_range/output.css a { value: color(prophoto-rgb 0.1 1.2 0.3); + space: prophoto-rgb; channels: 0.1 1.2 0.3 / 1; } @@ -53,6 +57,7 @@ a { <===> unitless/green/below_range/output.css a { value: color(prophoto-rgb 0.1 -0.2 0.3); + space: prophoto-rgb; channels: 0.1 -0.2 0.3 / 1; } @@ -65,6 +70,7 @@ a { <===> unitless/blue/above_range/output.css a { value: color(prophoto-rgb 0.1 0.2 1.3); + space: prophoto-rgb; channels: 0.1 0.2 1.3 / 1; } @@ -77,6 +83,7 @@ a { <===> unitless/blue/below_range/output.css a { value: color(prophoto-rgb 0.1 0.2 -0.3); + space: prophoto-rgb; channels: 0.1 0.2 -0.3 / 1; } @@ -89,6 +96,7 @@ a { <===> percent/in_range/output.css a { value: color(prophoto-rgb 0.1 0.2 0.3); + space: prophoto-rgb; channels: 0.1 0.2 0.3 / 1; } @@ -101,6 +109,7 @@ a { <===> percent/red/above_range/output.css a { value: color(prophoto-rgb 1.1 0.2 0.3); + space: prophoto-rgb; channels: 1.1 0.2 0.3 / 1; } @@ -113,6 +122,7 @@ a { <===> percent/red/below_range/output.css a { value: color(prophoto-rgb -0.1 0.2 0.3); + space: prophoto-rgb; channels: -0.1 0.2 0.3 / 1; } @@ -125,6 +135,7 @@ a { <===> percent/green/above_range/output.css a { value: color(prophoto-rgb 0.1 1.2 0.3); + space: prophoto-rgb; channels: 0.1 1.2 0.3 / 1; } @@ -137,6 +148,7 @@ a { <===> percent/green/below_range/output.css a { value: color(prophoto-rgb 0.1 -0.2 0.3); + space: prophoto-rgb; channels: 0.1 -0.2 0.3 / 1; } @@ -149,6 +161,7 @@ a { <===> percent/blue/above_range/output.css a { value: color(prophoto-rgb 0.1 0.2 1.3); + space: prophoto-rgb; channels: 0.1 0.2 1.3 / 1; } @@ -161,5 +174,6 @@ a { <===> percent/blue/below_range/output.css a { value: color(prophoto-rgb 0.1 0.2 -0.3); + space: prophoto-rgb; 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 index c8a402cb5..097ea4665 100644 --- a/spec/core_functions/color/color/spaces/rec2020.hrx +++ b/spec/core_functions/color/color/spaces/rec2020.hrx @@ -5,6 +5,7 @@ <===> unitless/in_range/output.css a { value: color(rec2020 0.1 0.2 0.3); + space: rec2020; channels: 0.1 0.2 0.3 / 1; } @@ -17,6 +18,7 @@ a { <===> unitless/red/above_range/output.css a { value: color(rec2020 1.1 0.2 0.3); + space: rec2020; channels: 1.1 0.2 0.3 / 1; } @@ -29,6 +31,7 @@ a { <===> unitless/red/below_range/output.css a { value: color(rec2020 -0.1 0.2 0.3); + space: rec2020; channels: -0.1 0.2 0.3 / 1; } @@ -41,6 +44,7 @@ a { <===> unitless/green/above_range/output.css a { value: color(rec2020 0.1 1.2 0.3); + space: rec2020; channels: 0.1 1.2 0.3 / 1; } @@ -53,6 +57,7 @@ a { <===> unitless/green/below_range/output.css a { value: color(rec2020 0.1 -0.2 0.3); + space: rec2020; channels: 0.1 -0.2 0.3 / 1; } @@ -65,6 +70,7 @@ a { <===> unitless/blue/above_range/output.css a { value: color(rec2020 0.1 0.2 1.3); + space: rec2020; channels: 0.1 0.2 1.3 / 1; } @@ -77,6 +83,7 @@ a { <===> unitless/blue/below_range/output.css a { value: color(rec2020 0.1 0.2 -0.3); + space: rec2020; channels: 0.1 0.2 -0.3 / 1; } @@ -89,6 +96,7 @@ a { <===> percent/in_range/output.css a { value: color(rec2020 0.1 0.2 0.3); + space: rec2020; channels: 0.1 0.2 0.3 / 1; } @@ -101,6 +109,7 @@ a { <===> percent/red/above_range/output.css a { value: color(rec2020 1.1 0.2 0.3); + space: rec2020; channels: 1.1 0.2 0.3 / 1; } @@ -113,6 +122,7 @@ a { <===> percent/red/below_range/output.css a { value: color(rec2020 -0.1 0.2 0.3); + space: rec2020; channels: -0.1 0.2 0.3 / 1; } @@ -125,6 +135,7 @@ a { <===> percent/green/above_range/output.css a { value: color(rec2020 0.1 1.2 0.3); + space: rec2020; channels: 0.1 1.2 0.3 / 1; } @@ -137,6 +148,7 @@ a { <===> percent/green/below_range/output.css a { value: color(rec2020 0.1 -0.2 0.3); + space: rec2020; channels: 0.1 -0.2 0.3 / 1; } @@ -149,6 +161,7 @@ a { <===> percent/blue/above_range/output.css a { value: color(rec2020 0.1 0.2 1.3); + space: rec2020; channels: 0.1 0.2 1.3 / 1; } @@ -161,5 +174,6 @@ a { <===> percent/blue/below_range/output.css a { value: color(rec2020 0.1 0.2 -0.3); + space: rec2020; 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 index a3f08c968..05e445a7f 100644 --- a/spec/core_functions/color/color/spaces/srgb.hrx +++ b/spec/core_functions/color/color/spaces/srgb.hrx @@ -5,6 +5,7 @@ <===> unitless/in_range/output.css a { value: color(srgb 0.1 0.2 0.3); + space: srgb; channels: 0.1 0.2 0.3 / 1; } @@ -17,6 +18,7 @@ a { <===> unitless/red/above_range/output.css a { value: color(srgb 1.1 0.2 0.3); + space: srgb; channels: 1.1 0.2 0.3 / 1; } @@ -29,6 +31,7 @@ a { <===> unitless/red/below_range/output.css a { value: color(srgb -0.1 0.2 0.3); + space: srgb; channels: -0.1 0.2 0.3 / 1; } @@ -41,6 +44,7 @@ a { <===> unitless/green/above_range/output.css a { value: color(srgb 0.1 1.2 0.3); + space: srgb; channels: 0.1 1.2 0.3 / 1; } @@ -53,6 +57,7 @@ a { <===> unitless/green/below_range/output.css a { value: color(srgb 0.1 -0.2 0.3); + space: srgb; channels: 0.1 -0.2 0.3 / 1; } @@ -65,6 +70,7 @@ a { <===> unitless/blue/above_range/output.css a { value: color(srgb 0.1 0.2 1.3); + space: srgb; channels: 0.1 0.2 1.3 / 1; } @@ -77,6 +83,7 @@ a { <===> unitless/blue/below_range/output.css a { value: color(srgb 0.1 0.2 -0.3); + space: srgb; channels: 0.1 0.2 -0.3 / 1; } @@ -89,6 +96,7 @@ a { <===> percent/in_range/output.css a { value: color(srgb 0.1 0.2 0.3); + space: srgb; channels: 0.1 0.2 0.3 / 1; } @@ -101,6 +109,7 @@ a { <===> percent/red/above_range/output.css a { value: color(srgb 1.1 0.2 0.3); + space: srgb; channels: 1.1 0.2 0.3 / 1; } @@ -113,6 +122,7 @@ a { <===> percent/red/below_range/output.css a { value: color(srgb -0.1 0.2 0.3); + space: srgb; channels: -0.1 0.2 0.3 / 1; } @@ -125,6 +135,7 @@ a { <===> percent/green/above_range/output.css a { value: color(srgb 0.1 1.2 0.3); + space: srgb; channels: 0.1 1.2 0.3 / 1; } @@ -137,6 +148,7 @@ a { <===> percent/green/below_range/output.css a { value: color(srgb 0.1 -0.2 0.3); + space: srgb; channels: 0.1 -0.2 0.3 / 1; } @@ -149,6 +161,7 @@ a { <===> percent/blue/above_range/output.css a { value: color(srgb 0.1 0.2 1.3); + space: srgb; channels: 0.1 0.2 1.3 / 1; } @@ -161,5 +174,6 @@ a { <===> percent/blue/below_range/output.css a { value: color(srgb 0.1 0.2 -0.3); + space: srgb; 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 index 17cf17786..395abf17b 100644 --- a/spec/core_functions/color/color/spaces/srgb_linear.hrx +++ b/spec/core_functions/color/color/spaces/srgb_linear.hrx @@ -5,6 +5,7 @@ <===> unitless/in_range/output.css a { value: color(srgb-linear 0.1 0.2 0.3); + space: srgb-linear; channels: 0.1 0.2 0.3 / 1; } @@ -17,6 +18,7 @@ a { <===> unitless/red/above_range/output.css a { value: color(srgb-linear 1.1 0.2 0.3); + space: srgb-linear; channels: 1.1 0.2 0.3 / 1; } @@ -29,6 +31,7 @@ a { <===> unitless/red/below_range/output.css a { value: color(srgb-linear -0.1 0.2 0.3); + space: srgb-linear; channels: -0.1 0.2 0.3 / 1; } @@ -41,6 +44,7 @@ a { <===> unitless/green/above_range/output.css a { value: color(srgb-linear 0.1 1.2 0.3); + space: srgb-linear; channels: 0.1 1.2 0.3 / 1; } @@ -53,6 +57,7 @@ a { <===> unitless/green/below_range/output.css a { value: color(srgb-linear 0.1 -0.2 0.3); + space: srgb-linear; channels: 0.1 -0.2 0.3 / 1; } @@ -65,6 +70,7 @@ a { <===> unitless/blue/above_range/output.css a { value: color(srgb-linear 0.1 0.2 1.3); + space: srgb-linear; channels: 0.1 0.2 1.3 / 1; } @@ -77,6 +83,7 @@ a { <===> unitless/blue/below_range/output.css a { value: color(srgb-linear 0.1 0.2 -0.3); + space: srgb-linear; channels: 0.1 0.2 -0.3 / 1; } @@ -89,6 +96,7 @@ a { <===> percent/in_range/output.css a { value: color(srgb-linear 0.1 0.2 0.3); + space: srgb-linear; channels: 0.1 0.2 0.3 / 1; } @@ -101,6 +109,7 @@ a { <===> percent/red/above_range/output.css a { value: color(srgb-linear 1.1 0.2 0.3); + space: srgb-linear; channels: 1.1 0.2 0.3 / 1; } @@ -113,6 +122,7 @@ a { <===> percent/red/below_range/output.css a { value: color(srgb-linear -0.1 0.2 0.3); + space: srgb-linear; channels: -0.1 0.2 0.3 / 1; } @@ -125,6 +135,7 @@ a { <===> percent/green/above_range/output.css a { value: color(srgb-linear 0.1 1.2 0.3); + space: srgb-linear; channels: 0.1 1.2 0.3 / 1; } @@ -137,6 +148,7 @@ a { <===> percent/green/below_range/output.css a { value: color(srgb-linear 0.1 -0.2 0.3); + space: srgb-linear; channels: 0.1 -0.2 0.3 / 1; } @@ -149,6 +161,7 @@ a { <===> percent/blue/above_range/output.css a { value: color(srgb-linear 0.1 0.2 1.3); + space: srgb-linear; channels: 0.1 0.2 1.3 / 1; } @@ -161,5 +174,6 @@ a { <===> percent/blue/below_range/output.css a { value: color(srgb-linear 0.1 0.2 -0.3); + space: srgb-linear; 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 index 2b534f40b..9dfe04af2 100644 --- a/spec/core_functions/color/color/spaces/xyz.hrx +++ b/spec/core_functions/color/color/spaces/xyz.hrx @@ -5,6 +5,7 @@ <===> unitless/in_range/output.css a { value: color(xyz 0.1 0.2 0.3); + space: xyz; channels: 0.1 0.2 0.3 / 1; } @@ -17,6 +18,7 @@ a { <===> unitless/x/above_range/output.css a { value: color(xyz 1.1 0.2 0.3); + space: xyz; channels: 1.1 0.2 0.3 / 1; } @@ -29,6 +31,7 @@ a { <===> unitless/x/below_range/output.css a { value: color(xyz -0.1 0.2 0.3); + space: xyz; channels: -0.1 0.2 0.3 / 1; } @@ -41,6 +44,7 @@ a { <===> unitless/y/above_range/output.css a { value: color(xyz 0.1 1.2 0.3); + space: xyz; channels: 0.1 1.2 0.3 / 1; } @@ -53,6 +57,7 @@ a { <===> unitless/y/below_range/output.css a { value: color(xyz 0.1 -0.2 0.3); + space: xyz; channels: 0.1 -0.2 0.3 / 1; } @@ -65,6 +70,7 @@ a { <===> unitless/z/above_range/output.css a { value: color(xyz 0.1 0.2 1.3); + space: xyz; channels: 0.1 0.2 1.3 / 1; } @@ -77,6 +83,7 @@ a { <===> unitless/z/below_range/output.css a { value: color(xyz 0.1 0.2 -0.3); + space: xyz; channels: 0.1 0.2 -0.3 / 1; } @@ -89,6 +96,7 @@ a { <===> percent/in_range/output.css a { value: color(xyz 0.1 0.2 0.3); + space: xyz; channels: 0.1 0.2 0.3 / 1; } @@ -101,6 +109,7 @@ a { <===> percent/x/above_range/output.css a { value: color(xyz 1.1 0.2 0.3); + space: xyz; channels: 1.1 0.2 0.3 / 1; } @@ -113,6 +122,7 @@ a { <===> percent/x/below_range/output.css a { value: color(xyz -0.1 0.2 0.3); + space: xyz; channels: -0.1 0.2 0.3 / 1; } @@ -125,6 +135,7 @@ a { <===> percent/y/above_range/output.css a { value: color(xyz 0.1 1.2 0.3); + space: xyz; channels: 0.1 1.2 0.3 / 1; } @@ -137,6 +148,7 @@ a { <===> percent/y/below_range/output.css a { value: color(xyz 0.1 -0.2 0.3); + space: xyz; channels: 0.1 -0.2 0.3 / 1; } @@ -149,6 +161,7 @@ a { <===> percent/z/above_range/output.css a { value: color(xyz 0.1 0.2 1.3); + space: xyz; channels: 0.1 0.2 1.3 / 1; } @@ -161,6 +174,7 @@ a { <===> percent/z/below_range/output.css a { value: color(xyz 0.1 0.2 -0.3); + space: xyz; channels: 0.1 0.2 -0.3 / 1; } @@ -173,5 +187,6 @@ a { <===> xyz_d65/output.css a { value: color(xyz 0.1 0.2 0.3); + space: xyz; 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 index 7646f2d1a..3357106e0 100644 --- a/spec/core_functions/color/color/spaces/xyz_d50.hrx +++ b/spec/core_functions/color/color/spaces/xyz_d50.hrx @@ -5,6 +5,7 @@ <===> unitless/in_range/output.css a { value: color(xyz-d50 0.1 0.2 0.3); + space: xyz-d50; channels: 0.1 0.2 0.3 / 1; } @@ -17,6 +18,7 @@ a { <===> unitless/x/above_range/output.css a { value: color(xyz-d50 1.1 0.2 0.3); + space: xyz-d50; channels: 1.1 0.2 0.3 / 1; } @@ -29,6 +31,7 @@ a { <===> unitless/x/below_range/output.css a { value: color(xyz-d50 -0.1 0.2 0.3); + space: xyz-d50; channels: -0.1 0.2 0.3 / 1; } @@ -41,6 +44,7 @@ a { <===> unitless/y/above_range/output.css a { value: color(xyz-d50 0.1 1.2 0.3); + space: xyz-d50; channels: 0.1 1.2 0.3 / 1; } @@ -53,6 +57,7 @@ a { <===> unitless/y/below_range/output.css a { value: color(xyz-d50 0.1 -0.2 0.3); + space: xyz-d50; channels: 0.1 -0.2 0.3 / 1; } @@ -65,6 +70,7 @@ a { <===> unitless/z/above_range/output.css a { value: color(xyz-d50 0.1 0.2 1.3); + space: xyz-d50; channels: 0.1 0.2 1.3 / 1; } @@ -77,6 +83,7 @@ a { <===> unitless/z/below_range/output.css a { value: color(xyz-d50 0.1 0.2 -0.3); + space: xyz-d50; channels: 0.1 0.2 -0.3 / 1; } @@ -89,6 +96,7 @@ a { <===> percent/in_range/output.css a { value: color(xyz-d50 0.1 0.2 0.3); + space: xyz-d50; channels: 0.1 0.2 0.3 / 1; } @@ -101,6 +109,7 @@ a { <===> percent/x/above_range/output.css a { value: color(xyz-d50 1.1 0.2 0.3); + space: xyz-d50; channels: 1.1 0.2 0.3 / 1; } @@ -113,6 +122,7 @@ a { <===> percent/x/below_range/output.css a { value: color(xyz-d50 -0.1 0.2 0.3); + space: xyz-d50; channels: -0.1 0.2 0.3 / 1; } @@ -125,6 +135,7 @@ a { <===> percent/y/above_range/output.css a { value: color(xyz-d50 0.1 1.2 0.3); + space: xyz-d50; channels: 0.1 1.2 0.3 / 1; } @@ -137,6 +148,7 @@ a { <===> percent/y/below_range/output.css a { value: color(xyz-d50 0.1 -0.2 0.3); + space: xyz-d50; channels: 0.1 -0.2 0.3 / 1; } @@ -149,6 +161,7 @@ a { <===> percent/z/above_range/output.css a { value: color(xyz-d50 0.1 0.2 1.3); + space: xyz-d50; channels: 0.1 0.2 1.3 / 1; } @@ -161,5 +174,6 @@ a { <===> percent/z/below_range/output.css a { value: color(xyz-d50 0.1 0.2 -0.3); + space: xyz-d50; channels: 0.1 0.2 -0.3 / 1; } diff --git a/spec/core_functions/color/lab/alpha.hrx b/spec/core_functions/color/lab/alpha.hrx index 787b8831a..cff840012 100644 --- a/spec/core_functions/color/lab/alpha.hrx +++ b/spec/core_functions/color/lab/alpha.hrx @@ -5,6 +5,7 @@ <===> transparent/output.css a { value: lab(0% 255 127 / 0); + space: lab; channels: 0% 255 127 / 0; } @@ -17,6 +18,7 @@ a { <===> opaque/output.css a { value: lab(1% 2 3); + space: lab; channels: 1% 2 3 / 1; } @@ -29,6 +31,7 @@ a { <===> partial/output.css a { value: lab(1% 2 3 / 0.4); + space: lab; channels: 1% 2 3 / 0.4; } @@ -41,6 +44,7 @@ a { <===> percent/output.css a { value: lab(1% 2 3 / 0.4); + space: lab; channels: 1% 2 3 / 0.4; } @@ -53,6 +57,7 @@ a { <===> named/output.css a { value: lab(1% 2 3 / 0.4); + space: lab; channels: 1% 2 3 / 0.4; } @@ -66,6 +71,7 @@ a { <===> slash_list/output.css a { value: lab(1% 2 3 / 0.4); + space: lab; channels: 1% 2 3 / 0.4; } @@ -78,6 +84,7 @@ a { <===> none/slash/b/output.css a { value: lab(1% 2 none / 0.4); + space: lab; channels: 1% 2 none / 0.4; } @@ -90,6 +97,7 @@ a { <===> none/slash/alpha/output.css a { value: lab(1% 2 3 / none); + space: lab; channels: 1% 2 3 / none; } @@ -102,6 +110,7 @@ a { <===> none/slash/b_and_alpha/output.css a { value: lab(1% 2 none / none); + space: lab; channels: 1% 2 none / none; } @@ -115,6 +124,7 @@ a { <===> none/slash_list/b/output.css a { value: lab(1% 2 none / 0.4); + space: lab; channels: 1% 2 none / 0.4; } @@ -128,6 +138,7 @@ a { <===> none/slash_list/alpha/output.css a { value: lab(1% 2 3 / none); + space: lab; channels: 1% 2 3 / none; } @@ -141,5 +152,6 @@ a { <===> none/slash_list/b_and_alpha/output.css a { value: lab(1% 2 none / none); + space: lab; channels: 1% 2 none / none; } diff --git a/spec/core_functions/color/lab/no_alpha.hrx b/spec/core_functions/color/lab/no_alpha.hrx index 1131ea812..39d71357f 100644 --- a/spec/core_functions/color/lab/no_alpha.hrx +++ b/spec/core_functions/color/lab/no_alpha.hrx @@ -5,6 +5,7 @@ <===> unitless/ab/in_range/output.css a { value: lab(1% 2 -3); + space: lab; channels: 1% 2 -3 / 1; } @@ -17,6 +18,7 @@ a { <===> unitless/ab/above_range/output.css a { value: lab(1% 126 300); + space: lab; channels: 1% 126 300 / 1; } @@ -29,6 +31,7 @@ a { <===> unitless/ab/below_range/output.css a { value: lab(1% -126 -300); + space: lab; channels: 1% -126 -300 / 1; } @@ -41,6 +44,7 @@ a { <===> unitless/lightness/in_range/output.css a { value: lab(10% 2 -3); + space: lab; channels: 10% 2 -3 / 1; } @@ -53,6 +57,7 @@ a { <===> unitless/lightness/above_range/output.css a { value: lab(100% 2 3); + space: lab; channels: 100% 2 3 / 1; } @@ -65,6 +70,7 @@ a { <===> unitless/lightness/below_range/output.css a { value: lab(0% 2 3); + space: lab; channels: 0% 2 3 / 1; } @@ -77,6 +83,7 @@ a { <===> percent/ab/in_range/output.css a { value: lab(1% 2.5 -3.75); + space: lab; channels: 1% 2.5 -3.75 / 1; } @@ -89,6 +96,7 @@ a { <===> percent/ab/above_range/output.css a { value: lab(1% 126.25 187.5); + space: lab; channels: 1% 126.25 187.5 / 1; } @@ -101,6 +109,7 @@ a { <===> percent/ab/below_range/output.css a { value: lab(1% -126.25 -187.5); + space: lab; channels: 1% -126.25 -187.5 / 1; } @@ -113,6 +122,7 @@ a { <===> percent/lightness/in_range/output.css a { value: lab(1% 2.5 -3.75); + space: lab; channels: 1% 2.5 -3.75 / 1; } @@ -125,6 +135,7 @@ a { <===> percent/lightness/above_range/output.css a { value: lab(100% 2 3); + space: lab; channels: 100% 2 3 / 1; } @@ -137,6 +148,7 @@ a { <===> percent/lightness/below_range/output.css a { value: lab(0% 2 3); + space: lab; channels: 0% 2 3 / 1; } @@ -149,6 +161,7 @@ a { <===> none/lightness/output.css a { value: lab(none 2 3); + space: lab; channels: none 2 3 / 1; } @@ -161,6 +174,7 @@ a { <===> none/a/output.css a { value: lab(1% none 3); + space: lab; channels: 1% none 3 / 1; } @@ -173,6 +187,7 @@ a { <===> none/b/output.css a { value: lab(1% 2 none); + space: lab; channels: 1% 2 none / 1; } @@ -185,5 +200,6 @@ a { <===> named/output.css a { value: lab(1% 2 3); + space: lab; channels: 1% 2 3 / 1; } diff --git a/spec/core_functions/color/lch/alpha.hrx b/spec/core_functions/color/lch/alpha.hrx index 48e469d7c..a5957e271 100644 --- a/spec/core_functions/color/lch/alpha.hrx +++ b/spec/core_functions/color/lch/alpha.hrx @@ -5,6 +5,7 @@ <===> transparent/output.css a { value: lch(1% 2 3deg / 0); + space: lch; channels: 1% 2 3deg / 0; } @@ -17,6 +18,7 @@ a { <===> opaque/output.css a { value: lch(1% 2 3deg); + space: lch; channels: 1% 2 3deg / 1; } @@ -29,6 +31,7 @@ a { <===> partial/output.css a { value: lch(1% 2 3deg / 0.4); + space: lch; channels: 1% 2 3deg / 0.4; } @@ -41,6 +44,7 @@ a { <===> percent/output.css a { value: lch(1% 2 3deg / 0.4); + space: lch; channels: 1% 2 3deg / 0.4; } @@ -53,6 +57,7 @@ a { <===> named/output.css a { value: lch(1% 2 3deg / 0.4); + space: lch; channels: 1% 2 3deg / 0.4; } @@ -66,6 +71,7 @@ a { <===> slash_list/output.css a { value: lch(1% 2 3deg / 0.4); + space: lch; channels: 1% 2 3deg / 0.4; } @@ -78,6 +84,7 @@ a { <===> none/slash/hue/output.css a { value: lch(1% 2 none / 0.4); + space: lch; channels: 1% 2 none / 0.4; } @@ -90,6 +97,7 @@ a { <===> none/slash/alpha/output.css a { value: lch(1% 2 3deg / none); + space: lch; channels: 1% 2 3deg / none; } @@ -103,6 +111,7 @@ a { <===> none/slash_list/hue/output.css a { value: lch(1% 2 none / 0.4); + space: lch; channels: 1% 2 none / 0.4; } @@ -116,5 +125,6 @@ a { <===> none/slash_list/alpha/output.css a { value: lch(1% 2 3deg / none); + space: lch; channels: 1% 2 3deg / none; } diff --git a/spec/core_functions/color/lch/no_alpha.hrx b/spec/core_functions/color/lch/no_alpha.hrx index 20a7051fb..a13d4e629 100644 --- a/spec/core_functions/color/lch/no_alpha.hrx +++ b/spec/core_functions/color/lch/no_alpha.hrx @@ -5,6 +5,7 @@ <===> unitless/in_range/output.css a { value: lch(1% 2 3deg); + space: lch; channels: 1% 2 3deg / 1; } @@ -17,6 +18,7 @@ a { <===> unitless/lightness/above_range/output.css a { value: lch(100% 2 3deg); + space: lch; channels: 100% 2 3deg / 1; } @@ -29,6 +31,7 @@ a { <===> unitless/lightness/below_range/output.css a { value: lch(0% 2 3deg); + space: lch; channels: 0% 2 3deg / 1; } @@ -41,6 +44,7 @@ a { <===> unitless/chroma/above_range/output.css a { value: lch(1% 0.5 3deg); + space: lch; channels: 1% 0.5 3deg / 1; } @@ -53,6 +57,7 @@ a { <===> unitless/chroma/below_range/output.css a { value: lch(1% -0.1 3deg); + space: lch; channels: 1% -0.1 3deg / 1; } @@ -65,6 +70,7 @@ a { <===> unitless/hue/above_range/output.css a { value: lch(1% 2 1deg); + space: lch; channels: 1% 2 1deg / 1; } @@ -77,6 +83,7 @@ a { <===> unitless/hue/below_range/output.css a { value: lch(1% 2 359deg); + space: lch; channels: 1% 2 359deg / 1; } @@ -89,6 +96,7 @@ a { <===> percent/in_range/output.css a { value: lch(1% 3 3deg); + space: lch; channels: 1% 3 3deg / 1; } @@ -101,6 +109,7 @@ a { <===> percent/lightness/above_range/output.css a { value: lch(100% 2 3deg); + space: lch; channels: 100% 2 3deg / 1; } @@ -113,6 +122,7 @@ a { <===> percent/lightness/below_range/output.css a { value: lch(0% 2 3deg); + space: lch; channels: 0% 2 3deg / 1; } @@ -125,6 +135,7 @@ a { <===> percent/chroma/above_range/output.css a { value: lch(1% 151.5 3deg); + space: lch; channels: 1% 151.5 3deg / 1; } @@ -137,6 +148,7 @@ a { <===> percent/chroma/below_range/output.css a { value: lch(1% -1.5 3deg); + space: lch; channels: 1% -1.5 3deg / 1; } @@ -149,6 +161,7 @@ a { <===> none/lightness/output.css a { value: lch(none 2 3deg); + space: lch; channels: none 2 3deg / 1; } @@ -161,6 +174,7 @@ a { <===> none/chroma/output.css a { value: lch(1% none 3deg); + space: lch; channels: 1% none 3deg / 1; } @@ -173,6 +187,7 @@ a { <===> none/hue/output.css a { value: lch(1% 2 none); + space: lch; channels: 1% 2 none / 1; } @@ -185,5 +200,6 @@ a { <===> named/output.css a { value: lch(1% 2 3deg); + space: lch; channels: 1% 2 3deg / 1; } diff --git a/spec/core_functions/color/oklab/alpha.hrx b/spec/core_functions/color/oklab/alpha.hrx index 9a00b4ff8..ee7f24dac 100644 --- a/spec/core_functions/color/oklab/alpha.hrx +++ b/spec/core_functions/color/oklab/alpha.hrx @@ -5,6 +5,7 @@ <===> transparent/output.css a { value: oklab(0% 255 127 / 0); + space: oklab; channels: 0% 255 127 / 0; } @@ -17,6 +18,7 @@ a { <===> opaque/output.css a { value: oklab(1% 2 3); + space: oklab; channels: 1% 2 3 / 1; } @@ -29,6 +31,7 @@ a { <===> partial/output.css a { value: oklab(1% 2 3 / 0.4); + space: oklab; channels: 1% 2 3 / 0.4; } @@ -41,6 +44,7 @@ a { <===> percent/output.css a { value: oklab(1% 2 3 / 0.4); + space: oklab; channels: 1% 2 3 / 0.4; } @@ -53,6 +57,7 @@ a { <===> named/output.css a { value: oklab(1% 2 3 / 0.4); + space: oklab; channels: 1% 2 3 / 0.4; } @@ -66,6 +71,7 @@ a { <===> slash_list/output.css a { value: oklab(1% 2 3 / 0.4); + space: oklab; channels: 1% 2 3 / 0.4; } @@ -78,6 +84,7 @@ a { <===> none/slash/b/output.css a { value: oklab(1% 2 none / 0.4); + space: oklab; channels: 1% 2 none / 0.4; } @@ -90,6 +97,7 @@ a { <===> none/slash/alpha/output.css a { value: oklab(1% 2 3 / none); + space: oklab; channels: 1% 2 3 / none; } @@ -103,6 +111,7 @@ a { <===> none/slash_list/b/output.css a { value: oklab(1% 2 none / 0.4); + space: oklab; channels: 1% 2 none / 0.4; } @@ -116,6 +125,7 @@ a { <===> none/slash_list/alpha/output.css a { value: oklab(1% 2 3 / none); + space: oklab; channels: 1% 2 3 / none; } diff --git a/spec/core_functions/color/oklab/no_alpha.hrx b/spec/core_functions/color/oklab/no_alpha.hrx index 571a8a5b6..21698a935 100644 --- a/spec/core_functions/color/oklab/no_alpha.hrx +++ b/spec/core_functions/color/oklab/no_alpha.hrx @@ -5,6 +5,7 @@ <===> unitless/ab/in_range/output.css a { value: oklab(1% 2 -3); + space: oklab; channels: 1% 2 -3 / 1; } @@ -17,6 +18,7 @@ a { <===> unitless/ab/above_range/output.css a { value: oklab(1% 126 300); + space: oklab; channels: 1% 126 300 / 1; } @@ -29,6 +31,7 @@ a { <===> unitless/ab/below_range/output.css a { value: oklab(1% -126 -300); + space: oklab; channels: 1% -126 -300 / 1; } @@ -41,6 +44,7 @@ a { <===> unitless/lightness/in_range/output.css a { value: oklab(10% 2 -3); + space: oklab; channels: 10% 2 -3 / 1; } @@ -53,6 +57,7 @@ a { <===> unitless/lightness/above_range/output.css a { value: oklab(100% 2 3); + space: oklab; channels: 100% 2 3 / 1; } @@ -65,6 +70,7 @@ a { <===> unitless/lightness/below_range/output.css a { value: oklab(0% 2 3); + space: oklab; channels: 0% 2 3 / 1; } @@ -77,6 +83,7 @@ a { <===> percent/ab/in_range/output.css a { value: oklab(1% 0.008 -0.012); + space: oklab; channels: 1% 0.008 -0.012 / 1; } @@ -89,6 +96,7 @@ a { <===> percent/ab/above_range/output.css a { value: oklab(1% 0.404 0.6); + space: oklab; channels: 1% 0.404 0.6 / 1; } @@ -101,6 +109,7 @@ a { <===> percent/ab/below_range/output.css a { value: oklab(1% -0.404 -0.6); + space: oklab; channels: 1% -0.404 -0.6 / 1; } @@ -113,6 +122,7 @@ a { <===> percent/lightness/in_range/output.css a { value: oklab(1% 0.008 -0.012); + space: oklab; channels: 1% 0.008 -0.012 / 1; } @@ -125,6 +135,7 @@ a { <===> percent/lightness/above_range/output.css a { value: oklab(100% 2 3); + space: oklab; channels: 100% 2 3 / 1; } @@ -137,6 +148,7 @@ a { <===> percent/lightness/below_range/output.css a { value: oklab(0% 2 3); + space: oklab; channels: 0% 2 3 / 1; } @@ -149,6 +161,7 @@ a { <===> none/lightness/output.css a { value: oklab(none 2 3); + space: oklab; channels: none 2 3 / 1; } @@ -161,6 +174,7 @@ a { <===> none/a/output.css a { value: oklab(1% none 3); + space: oklab; channels: 1% none 3 / 1; } @@ -173,6 +187,7 @@ a { <===> none/b/output.css a { value: oklab(1% 2 none); + space: oklab; channels: 1% 2 none / 1; } @@ -197,5 +212,6 @@ a { <===> named/output.css a { value: oklab(1% 2 3); + space: oklab; channels: 1% 2 3 / 1; } diff --git a/spec/core_functions/color/oklch/alpha.hrx b/spec/core_functions/color/oklch/alpha.hrx index 31aa9aeb4..8ac85be2f 100644 --- a/spec/core_functions/color/oklch/alpha.hrx +++ b/spec/core_functions/color/oklch/alpha.hrx @@ -5,6 +5,7 @@ <===> transparent/output.css a { value: oklch(1% 0.2 3deg / 0); + space: oklch; channels: 1% 0.2 3deg / 0; } @@ -17,6 +18,7 @@ a { <===> opaque/output.css a { value: oklch(1% 0.2 3deg); + space: oklch; channels: 1% 0.2 3deg / 1; } @@ -29,6 +31,7 @@ a { <===> partial/output.css a { value: oklch(1% 0.2 3deg / 0.4); + space: oklch; channels: 1% 0.2 3deg / 0.4; } @@ -41,6 +44,7 @@ a { <===> percent/output.css a { value: oklch(1% 0.2 3deg / 0.4); + space: oklch; channels: 1% 0.2 3deg / 0.4; } @@ -53,6 +57,7 @@ a { <===> named/output.css a { value: oklch(1% 0.2 3deg / 0.4); + space: oklch; channels: 1% 0.2 3deg / 0.4; } @@ -66,6 +71,7 @@ a { <===> slash_list/output.css a { value: oklch(1% 0.2 3deg / 0.4); + space: oklch; channels: 1% 0.2 3deg / 0.4; } @@ -78,6 +84,7 @@ a { <===> none/slash/hue/output.css a { value: oklch(1% 0.2 none / 0.4); + space: oklch; channels: 1% 0.2 none / 0.4; } @@ -90,6 +97,7 @@ a { <===> none/slash/alpha/output.css a { value: oklch(1% 0.2 3deg / none); + space: oklch; channels: 1% 0.2 3deg / none; } @@ -103,6 +111,7 @@ a { <===> none/slash_list/hue/output.css a { value: oklch(1% 0.2 none / 0.4); + space: oklch; channels: 1% 0.2 none / 0.4; } @@ -116,5 +125,6 @@ a { <===> none/slash_list/alpha/output.css a { value: oklch(1% 0.2 3deg / none); + space: oklch; channels: 1% 0.2 3deg / none; } diff --git a/spec/core_functions/color/oklch/no_alpha.hrx b/spec/core_functions/color/oklch/no_alpha.hrx index f8daef211..478b6cc76 100644 --- a/spec/core_functions/color/oklch/no_alpha.hrx +++ b/spec/core_functions/color/oklch/no_alpha.hrx @@ -5,6 +5,7 @@ <===> unitless/in_range/output.css a { value: oklch(10% 0.2 3deg); + space: oklch; channels: 10% 0.2 3deg / 1; } @@ -17,6 +18,7 @@ a { <===> unitless/lightness/above_range/output.css a { value: oklch(100% 0.2 3deg); + space: oklch; channels: 100% 0.2 3deg / 1; } @@ -29,6 +31,7 @@ a { <===> unitless/lightness/below_range/output.css a { value: oklch(0% 0.2 3deg); + space: oklch; channels: 0% 0.2 3deg / 1; } @@ -41,6 +44,7 @@ a { <===> unitless/chroma/above_range/output.css a { value: oklch(1% 0.5 3deg); + space: oklch; channels: 1% 0.5 3deg / 1; } @@ -53,6 +57,7 @@ a { <===> unitless/chroma/below_range/output.css a { value: oklch(1% -0.1 3deg); + space: oklch; channels: 1% -0.1 3deg / 1; } @@ -65,6 +70,7 @@ a { <===> unitless/hue/above_range/output.css a { value: oklch(1% 0.2 1deg); + space: oklch; channels: 1% 0.2 1deg / 1; } @@ -77,6 +83,7 @@ a { <===> unitless/hue/below_range/output.css a { value: oklch(1% 0.2 359deg); + space: oklch; channels: 1% 0.2 359deg / 1; } @@ -89,6 +96,7 @@ a { <===> percent/in_range/output.css a { value: oklch(1% 0.008 3deg); + space: oklch; channels: 1% 0.008 3deg / 1; } @@ -101,6 +109,7 @@ a { <===> percent/lightness/above_range/output.css a { value: oklch(100% 0.2 3deg); + space: oklch; channels: 100% 0.2 3deg / 1; } @@ -113,6 +122,7 @@ a { <===> percent/lightness/below_range/output.css a { value: oklch(0% 0.2 3deg); + space: oklch; channels: 0% 0.2 3deg / 1; } @@ -125,6 +135,7 @@ a { <===> percent/chroma/above_range/output.css a { value: oklch(1% 0.404 3deg); + space: oklch; channels: 1% 0.404 3deg / 1; } @@ -137,6 +148,7 @@ a { <===> percent/chroma/below_range/output.css a { value: oklch(1% -0.004 3deg); + space: oklch; channels: 1% -0.004 3deg / 1; } @@ -149,6 +161,7 @@ a { <===> none/lightness/output.css a { value: oklch(none 0.2 3deg); + space: oklch; channels: none 0.2 3deg / 1; } @@ -161,6 +174,7 @@ a { <===> none/chroma/output.css a { value: oklch(1% none 3deg); + space: oklch; channels: 1% none 3deg / 1; } @@ -173,6 +187,7 @@ a { <===> none/hue/output.css a { value: oklch(1% 0.2 none); + space: oklch; channels: 1% 0.2 none / 1; } @@ -185,5 +200,6 @@ a { <===> named/output.css a { value: oklch(1% 0.2 3deg); + space: oklch; channels: 1% 0.2 3deg / 1; } From 6b131cbbe6470575ae15511cb6fbf834b89d235f Mon Sep 17 00:00:00 2001 From: Natalie Weizenbaum Date: Tue, 10 Oct 2023 16:33:13 -0700 Subject: [PATCH 03/18] Don't gamut-map when converting from out-of-gamut sRGB --- spec/core_functions/color/mix/mixed_spaces.hrx | 2 +- spec/core_functions/color/mix/predefined.hrx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/spec/core_functions/color/mix/mixed_spaces.hrx b/spec/core_functions/color/mix/mixed_spaces.hrx index db6581f8b..106e6e950 100644 --- a/spec/core_functions/color/mix/mixed_spaces.hrx +++ b/spec/core_functions/color/mix/mixed_spaces.hrx @@ -7,5 +7,5 @@ a {b: mix(hsl(0 100% 50%), green, $method: lch)} <===> output.css a { - b: hsl(49.4586711601, 100%, 27.8089044382%); + b: hsl(50.9351301875, 100%, 19.0269267557%); } diff --git a/spec/core_functions/color/mix/predefined.hrx b/spec/core_functions/color/mix/predefined.hrx index 7456d4806..4e1f23b30 100644 --- a/spec/core_functions/color/mix/predefined.hrx +++ b/spec/core_functions/color/mix/predefined.hrx @@ -19,7 +19,7 @@ a {b: mix(color(display-p3 1 0 0), color(display-p3 0 1 0), 60%, $method: hsl)} <===> rgb_explicit_method/output.css a { - b: color(display-p3 0.9849707148 0.9141322646 0.3079881122); + b: color(display-p3 0.7013873656 0.5957461134 0.1914381849); } <===> @@ -39,5 +39,5 @@ a {b: mix(color(xyz-d50 0.15 0.24 0), color(xyz-d65 1 .2 0), $method: hwb)} <===> xyz_explicit_method/output.css a { - b: color(xyz-d50 0.3464867621 0.2923393699 0.0410088495); + b: color(xyz-d50 0.3073003061 0.2185751869 0.0198783275); } From 464011f7e3d34d83a6f2d76944ae4796f7d84877 Mon Sep 17 00:00:00 2001 From: Natalie Weizenbaum Date: Tue, 10 Oct 2023 16:39:47 -0700 Subject: [PATCH 04/18] [Color 4] Add tests for color.to-space() --- .../color/to_space/a98_rgb/a98_rgb.hrx | 52 ++++++ .../color/to_space/a98_rgb/display_p3.hrx | 118 +++++++++++++ .../color/to_space/a98_rgb/hsl.hrx | 118 +++++++++++++ .../color/to_space/a98_rgb/hwb.hrx | 149 ++++++++++++++++ .../color/to_space/a98_rgb/lab.hrx | 117 +++++++++++++ .../color/to_space/a98_rgb/lch.hrx | 117 +++++++++++++ .../color/to_space/a98_rgb/oklab.hrx | 117 +++++++++++++ .../color/to_space/a98_rgb/oklch.hrx | 117 +++++++++++++ .../color/to_space/a98_rgb/prophoto_rgb.hrx | 118 +++++++++++++ .../color/to_space/a98_rgb/rec2020.hrx | 118 +++++++++++++ .../color/to_space/a98_rgb/rgb.hrx | 118 +++++++++++++ .../color/to_space/a98_rgb/srgb.hrx | 118 +++++++++++++ .../color/to_space/a98_rgb/srgb_linear.hrx | 118 +++++++++++++ .../color/to_space/a98_rgb/xyz.hrx | 118 +++++++++++++ .../color/to_space/a98_rgb/xyz_d50.hrx | 118 +++++++++++++ .../color/to_space/display_p3/a98_rgb.hrx | 118 +++++++++++++ .../color/to_space/display_p3/display_p3.hrx | 52 ++++++ .../color/to_space/display_p3/hsl.hrx | 118 +++++++++++++ .../color/to_space/display_p3/hwb.hrx | 149 ++++++++++++++++ .../color/to_space/display_p3/lab.hrx | 117 +++++++++++++ .../color/to_space/display_p3/lch.hrx | 117 +++++++++++++ .../color/to_space/display_p3/oklab.hrx | 117 +++++++++++++ .../color/to_space/display_p3/oklch.hrx | 117 +++++++++++++ .../to_space/display_p3/prophoto_rgb.hrx | 118 +++++++++++++ .../color/to_space/display_p3/rec2020.hrx | 118 +++++++++++++ .../color/to_space/display_p3/rgb.hrx | 118 +++++++++++++ .../color/to_space/display_p3/srgb.hrx | 118 +++++++++++++ .../color/to_space/display_p3/srgb_linear.hrx | 118 +++++++++++++ .../color/to_space/display_p3/xyz.hrx | 118 +++++++++++++ .../color/to_space/display_p3/xyz_d50.hrx | 118 +++++++++++++ spec/core_functions/color/to_space/error.hrx | 89 ++++++++++ .../color/to_space/lab/a98_rgb.hrx | 118 +++++++++++++ .../color/to_space/lab/display_p3.hrx | 118 +++++++++++++ .../core_functions/color/to_space/lab/hsl.hrx | 118 +++++++++++++ .../core_functions/color/to_space/lab/hwb.hrx | 118 +++++++++++++ .../core_functions/color/to_space/lab/lab.hrx | 52 ++++++ .../core_functions/color/to_space/lab/lch.hrx | 118 +++++++++++++ .../color/to_space/lab/oklab.hrx | 117 +++++++++++++ .../color/to_space/lab/oklch.hrx | 117 +++++++++++++ .../color/to_space/lab/prophoto_rgb.hrx | 118 +++++++++++++ .../color/to_space/lab/rec2020.hrx | 118 +++++++++++++ .../core_functions/color/to_space/lab/rgb.hrx | 118 +++++++++++++ .../color/to_space/lab/srgb.hrx | 118 +++++++++++++ .../color/to_space/lab/srgb_linear.hrx | 118 +++++++++++++ .../core_functions/color/to_space/lab/xyz.hrx | 118 +++++++++++++ .../color/to_space/lab/xyz_d50.hrx | 118 +++++++++++++ .../color/to_space/oklab/a98_rgb.hrx | 118 +++++++++++++ .../color/to_space/oklab/display_p3.hrx | 118 +++++++++++++ .../color/to_space/oklab/hsl.hrx | 118 +++++++++++++ .../color/to_space/oklab/hwb.hrx | 118 +++++++++++++ .../color/to_space/oklab/lab.hrx | 121 +++++++++++++ .../color/to_space/oklab/lch.hrx | 126 +++++++++++++ .../color/to_space/oklab/oklab.hrx | 52 ++++++ .../color/to_space/oklab/oklch.hrx | 117 +++++++++++++ .../color/to_space/oklab/prophoto_rgb.hrx | 118 +++++++++++++ .../color/to_space/oklab/rec2020.hrx | 118 +++++++++++++ .../color/to_space/oklab/rgb.hrx | 118 +++++++++++++ .../color/to_space/oklab/srgb.hrx | 118 +++++++++++++ .../color/to_space/oklab/srgb_linear.hrx | 118 +++++++++++++ .../color/to_space/oklab/xyz.hrx | 118 +++++++++++++ .../color/to_space/oklab/xyz_d50.hrx | 118 +++++++++++++ .../core_functions/color/to_space/options.yml | 3 + .../color/to_space/prophoto_rgb/a98_rgb.hrx | 118 +++++++++++++ .../to_space/prophoto_rgb/display_p3.hrx | 118 +++++++++++++ .../color/to_space/prophoto_rgb/hsl.hrx | 118 +++++++++++++ .../color/to_space/prophoto_rgb/hwb.hrx | 149 ++++++++++++++++ .../color/to_space/prophoto_rgb/lab.hrx | 119 +++++++++++++ .../color/to_space/prophoto_rgb/lch.hrx | 119 +++++++++++++ .../color/to_space/prophoto_rgb/oklab.hrx | 117 +++++++++++++ .../color/to_space/prophoto_rgb/oklch.hrx | 117 +++++++++++++ .../to_space/prophoto_rgb/prophoto_rgb.hrx | 52 ++++++ .../color/to_space/prophoto_rgb/rec2020.hrx | 118 +++++++++++++ .../color/to_space/prophoto_rgb/rgb.hrx | 118 +++++++++++++ .../color/to_space/prophoto_rgb/srgb.hrx | 118 +++++++++++++ .../to_space/prophoto_rgb/srgb_linear.hrx | 118 +++++++++++++ .../color/to_space/prophoto_rgb/xyz.hrx | 118 +++++++++++++ .../color/to_space/prophoto_rgb/xyz_d50.hrx | 118 +++++++++++++ .../color/to_space/rec2020/a98_rgb.hrx | 118 +++++++++++++ .../color/to_space/rec2020/display_p3.hrx | 118 +++++++++++++ .../color/to_space/rec2020/hsl.hrx | 118 +++++++++++++ .../color/to_space/rec2020/hwb.hrx | 149 ++++++++++++++++ .../color/to_space/rec2020/lab.hrx | 117 +++++++++++++ .../color/to_space/rec2020/lch.hrx | 117 +++++++++++++ .../color/to_space/rec2020/oklab.hrx | 117 +++++++++++++ .../color/to_space/rec2020/oklch.hrx | 117 +++++++++++++ .../color/to_space/rec2020/prophoto_rgb.hrx | 118 +++++++++++++ .../color/to_space/rec2020/rec2020.hrx | 52 ++++++ .../color/to_space/rec2020/rgb.hrx | 118 +++++++++++++ .../color/to_space/rec2020/srgb.hrx | 118 +++++++++++++ .../color/to_space/rec2020/srgb_linear.hrx | 118 +++++++++++++ .../color/to_space/rec2020/xyz.hrx | 118 +++++++++++++ .../color/to_space/rec2020/xyz_d50.hrx | 118 +++++++++++++ .../color/to_space/rgb/a98_rgb.hrx | 129 ++++++++++++++ .../color/to_space/rgb/display_p3.hrx | 129 ++++++++++++++ .../core_functions/color/to_space/rgb/hsl.hrx | 129 ++++++++++++++ .../core_functions/color/to_space/rgb/hwb.hrx | 165 ++++++++++++++++++ .../core_functions/color/to_space/rgb/lab.hrx | 128 ++++++++++++++ .../core_functions/color/to_space/rgb/lch.hrx | 128 ++++++++++++++ .../color/to_space/rgb/oklab.hrx | 128 ++++++++++++++ .../color/to_space/rgb/oklch.hrx | 128 ++++++++++++++ .../color/to_space/rgb/prophoto_rgb.hrx | 129 ++++++++++++++ .../color/to_space/rgb/rec2020.hrx | 129 ++++++++++++++ .../core_functions/color/to_space/rgb/rgb.hrx | 52 ++++++ .../color/to_space/rgb/srgb.hrx | 129 ++++++++++++++ .../color/to_space/rgb/srgb_linear.hrx | 129 ++++++++++++++ .../core_functions/color/to_space/rgb/xyz.hrx | 129 ++++++++++++++ .../color/to_space/rgb/xyz_d50.hrx | 129 ++++++++++++++ .../color/to_space/srgb/a98_rgb.hrx | 118 +++++++++++++ .../color/to_space/srgb/display_p3.hrx | 118 +++++++++++++ .../color/to_space/srgb/hsl.hrx | 118 +++++++++++++ .../color/to_space/srgb/hwb.hrx | 149 ++++++++++++++++ .../color/to_space/srgb/lab.hrx | 117 +++++++++++++ .../color/to_space/srgb/lch.hrx | 117 +++++++++++++ .../color/to_space/srgb/oklab.hrx | 117 +++++++++++++ .../color/to_space/srgb/oklch.hrx | 117 +++++++++++++ .../color/to_space/srgb/prophoto_rgb.hrx | 118 +++++++++++++ .../color/to_space/srgb/rec2020.hrx | 118 +++++++++++++ .../color/to_space/srgb/rgb.hrx | 118 +++++++++++++ .../color/to_space/srgb/srgb.hrx | 52 ++++++ .../color/to_space/srgb/srgb_linear.hrx | 118 +++++++++++++ .../color/to_space/srgb/xyz.hrx | 118 +++++++++++++ .../color/to_space/srgb/xyz_d50.hrx | 118 +++++++++++++ .../color/to_space/srgb_linear/a98_rgb.hrx | 118 +++++++++++++ .../color/to_space/srgb_linear/display_p3.hrx | 118 +++++++++++++ .../color/to_space/srgb_linear/hsl.hrx | 118 +++++++++++++ .../color/to_space/srgb_linear/hwb.hrx | 149 ++++++++++++++++ .../color/to_space/srgb_linear/lab.hrx | 117 +++++++++++++ .../color/to_space/srgb_linear/lch.hrx | 117 +++++++++++++ .../color/to_space/srgb_linear/oklab.hrx | 117 +++++++++++++ .../color/to_space/srgb_linear/oklch.hrx | 117 +++++++++++++ .../to_space/srgb_linear/prophoto_rgb.hrx | 118 +++++++++++++ .../color/to_space/srgb_linear/rec2020.hrx | 118 +++++++++++++ .../color/to_space/srgb_linear/rgb.hrx | 118 +++++++++++++ .../color/to_space/srgb_linear/srgb.hrx | 118 +++++++++++++ .../to_space/srgb_linear/srgb_linear.hrx | 52 ++++++ .../color/to_space/srgb_linear/xyz.hrx | 118 +++++++++++++ .../color/to_space/srgb_linear/xyz_d50.hrx | 118 +++++++++++++ .../color/to_space/xyz/a98_rgb.hrx | 118 +++++++++++++ .../color/to_space/xyz/display_p3.hrx | 118 +++++++++++++ .../core_functions/color/to_space/xyz/hsl.hrx | 118 +++++++++++++ .../core_functions/color/to_space/xyz/hwb.hrx | 149 ++++++++++++++++ .../core_functions/color/to_space/xyz/lab.hrx | 125 +++++++++++++ .../core_functions/color/to_space/xyz/lch.hrx | 125 +++++++++++++ .../color/to_space/xyz/oklab.hrx | 117 +++++++++++++ .../color/to_space/xyz/oklch.hrx | 117 +++++++++++++ .../color/to_space/xyz/prophoto_rgb.hrx | 118 +++++++++++++ .../color/to_space/xyz/rec2020.hrx | 118 +++++++++++++ .../core_functions/color/to_space/xyz/rgb.hrx | 118 +++++++++++++ .../color/to_space/xyz/srgb.hrx | 118 +++++++++++++ .../color/to_space/xyz/srgb_linear.hrx | 118 +++++++++++++ .../core_functions/color/to_space/xyz/xyz.hrx | 52 ++++++ .../color/to_space/xyz/xyz_d50.hrx | 118 +++++++++++++ .../to_space/xyz_d50/xyz-d50/a98_rgb.hrx | 52 ++++++ .../to_space/xyz_d50/xyz-d50/display_p3.hrx | 118 +++++++++++++ .../color/to_space/xyz_d50/xyz-d50/hsl.hrx | 118 +++++++++++++ .../color/to_space/xyz_d50/xyz-d50/hwb.hrx | 149 ++++++++++++++++ .../color/to_space/xyz_d50/xyz-d50/lab.hrx | 117 +++++++++++++ .../color/to_space/xyz_d50/xyz-d50/lch.hrx | 117 +++++++++++++ .../color/to_space/xyz_d50/xyz-d50/oklab.hrx | 117 +++++++++++++ .../color/to_space/xyz_d50/xyz-d50/oklch.hrx | 117 +++++++++++++ .../to_space/xyz_d50/xyz-d50/prophoto_rgb.hrx | 118 +++++++++++++ .../to_space/xyz_d50/xyz-d50/rec2020.hrx | 118 +++++++++++++ .../color/to_space/xyz_d50/xyz-d50/rgb.hrx | 118 +++++++++++++ .../color/to_space/xyz_d50/xyz-d50/srgb.hrx | 118 +++++++++++++ .../to_space/xyz_d50/xyz-d50/srgb_linear.hrx | 118 +++++++++++++ .../color/to_space/xyz_d50/xyz-d50/xyz.hrx | 118 +++++++++++++ .../to_space/xyz_d50/xyz-d50/xyz_d50.hrx | 118 +++++++++++++ 167 files changed, 19266 insertions(+) create mode 100644 spec/core_functions/color/to_space/a98_rgb/a98_rgb.hrx create mode 100644 spec/core_functions/color/to_space/a98_rgb/display_p3.hrx create mode 100644 spec/core_functions/color/to_space/a98_rgb/hsl.hrx create mode 100644 spec/core_functions/color/to_space/a98_rgb/hwb.hrx create mode 100644 spec/core_functions/color/to_space/a98_rgb/lab.hrx create mode 100644 spec/core_functions/color/to_space/a98_rgb/lch.hrx create mode 100644 spec/core_functions/color/to_space/a98_rgb/oklab.hrx create mode 100644 spec/core_functions/color/to_space/a98_rgb/oklch.hrx create mode 100644 spec/core_functions/color/to_space/a98_rgb/prophoto_rgb.hrx create mode 100644 spec/core_functions/color/to_space/a98_rgb/rec2020.hrx create mode 100644 spec/core_functions/color/to_space/a98_rgb/rgb.hrx create mode 100644 spec/core_functions/color/to_space/a98_rgb/srgb.hrx create mode 100644 spec/core_functions/color/to_space/a98_rgb/srgb_linear.hrx create mode 100644 spec/core_functions/color/to_space/a98_rgb/xyz.hrx create mode 100644 spec/core_functions/color/to_space/a98_rgb/xyz_d50.hrx create mode 100644 spec/core_functions/color/to_space/display_p3/a98_rgb.hrx create mode 100644 spec/core_functions/color/to_space/display_p3/display_p3.hrx create mode 100644 spec/core_functions/color/to_space/display_p3/hsl.hrx create mode 100644 spec/core_functions/color/to_space/display_p3/hwb.hrx create mode 100644 spec/core_functions/color/to_space/display_p3/lab.hrx create mode 100644 spec/core_functions/color/to_space/display_p3/lch.hrx create mode 100644 spec/core_functions/color/to_space/display_p3/oklab.hrx create mode 100644 spec/core_functions/color/to_space/display_p3/oklch.hrx create mode 100644 spec/core_functions/color/to_space/display_p3/prophoto_rgb.hrx create mode 100644 spec/core_functions/color/to_space/display_p3/rec2020.hrx create mode 100644 spec/core_functions/color/to_space/display_p3/rgb.hrx create mode 100644 spec/core_functions/color/to_space/display_p3/srgb.hrx create mode 100644 spec/core_functions/color/to_space/display_p3/srgb_linear.hrx create mode 100644 spec/core_functions/color/to_space/display_p3/xyz.hrx create mode 100644 spec/core_functions/color/to_space/display_p3/xyz_d50.hrx create mode 100644 spec/core_functions/color/to_space/error.hrx create mode 100644 spec/core_functions/color/to_space/lab/a98_rgb.hrx create mode 100644 spec/core_functions/color/to_space/lab/display_p3.hrx create mode 100644 spec/core_functions/color/to_space/lab/hsl.hrx create mode 100644 spec/core_functions/color/to_space/lab/hwb.hrx create mode 100644 spec/core_functions/color/to_space/lab/lab.hrx create mode 100644 spec/core_functions/color/to_space/lab/lch.hrx create mode 100644 spec/core_functions/color/to_space/lab/oklab.hrx create mode 100644 spec/core_functions/color/to_space/lab/oklch.hrx create mode 100644 spec/core_functions/color/to_space/lab/prophoto_rgb.hrx create mode 100644 spec/core_functions/color/to_space/lab/rec2020.hrx create mode 100644 spec/core_functions/color/to_space/lab/rgb.hrx create mode 100644 spec/core_functions/color/to_space/lab/srgb.hrx create mode 100644 spec/core_functions/color/to_space/lab/srgb_linear.hrx create mode 100644 spec/core_functions/color/to_space/lab/xyz.hrx create mode 100644 spec/core_functions/color/to_space/lab/xyz_d50.hrx create mode 100644 spec/core_functions/color/to_space/oklab/a98_rgb.hrx create mode 100644 spec/core_functions/color/to_space/oklab/display_p3.hrx create mode 100644 spec/core_functions/color/to_space/oklab/hsl.hrx create mode 100644 spec/core_functions/color/to_space/oklab/hwb.hrx create mode 100644 spec/core_functions/color/to_space/oklab/lab.hrx create mode 100644 spec/core_functions/color/to_space/oklab/lch.hrx create mode 100644 spec/core_functions/color/to_space/oklab/oklab.hrx create mode 100644 spec/core_functions/color/to_space/oklab/oklch.hrx create mode 100644 spec/core_functions/color/to_space/oklab/prophoto_rgb.hrx create mode 100644 spec/core_functions/color/to_space/oklab/rec2020.hrx create mode 100644 spec/core_functions/color/to_space/oklab/rgb.hrx create mode 100644 spec/core_functions/color/to_space/oklab/srgb.hrx create mode 100644 spec/core_functions/color/to_space/oklab/srgb_linear.hrx create mode 100644 spec/core_functions/color/to_space/oklab/xyz.hrx create mode 100644 spec/core_functions/color/to_space/oklab/xyz_d50.hrx create mode 100644 spec/core_functions/color/to_space/options.yml create mode 100644 spec/core_functions/color/to_space/prophoto_rgb/a98_rgb.hrx create mode 100644 spec/core_functions/color/to_space/prophoto_rgb/display_p3.hrx create mode 100644 spec/core_functions/color/to_space/prophoto_rgb/hsl.hrx create mode 100644 spec/core_functions/color/to_space/prophoto_rgb/hwb.hrx create mode 100644 spec/core_functions/color/to_space/prophoto_rgb/lab.hrx create mode 100644 spec/core_functions/color/to_space/prophoto_rgb/lch.hrx create mode 100644 spec/core_functions/color/to_space/prophoto_rgb/oklab.hrx create mode 100644 spec/core_functions/color/to_space/prophoto_rgb/oklch.hrx create mode 100644 spec/core_functions/color/to_space/prophoto_rgb/prophoto_rgb.hrx create mode 100644 spec/core_functions/color/to_space/prophoto_rgb/rec2020.hrx create mode 100644 spec/core_functions/color/to_space/prophoto_rgb/rgb.hrx create mode 100644 spec/core_functions/color/to_space/prophoto_rgb/srgb.hrx create mode 100644 spec/core_functions/color/to_space/prophoto_rgb/srgb_linear.hrx create mode 100644 spec/core_functions/color/to_space/prophoto_rgb/xyz.hrx create mode 100644 spec/core_functions/color/to_space/prophoto_rgb/xyz_d50.hrx create mode 100644 spec/core_functions/color/to_space/rec2020/a98_rgb.hrx create mode 100644 spec/core_functions/color/to_space/rec2020/display_p3.hrx create mode 100644 spec/core_functions/color/to_space/rec2020/hsl.hrx create mode 100644 spec/core_functions/color/to_space/rec2020/hwb.hrx create mode 100644 spec/core_functions/color/to_space/rec2020/lab.hrx create mode 100644 spec/core_functions/color/to_space/rec2020/lch.hrx create mode 100644 spec/core_functions/color/to_space/rec2020/oklab.hrx create mode 100644 spec/core_functions/color/to_space/rec2020/oklch.hrx create mode 100644 spec/core_functions/color/to_space/rec2020/prophoto_rgb.hrx create mode 100644 spec/core_functions/color/to_space/rec2020/rec2020.hrx create mode 100644 spec/core_functions/color/to_space/rec2020/rgb.hrx create mode 100644 spec/core_functions/color/to_space/rec2020/srgb.hrx create mode 100644 spec/core_functions/color/to_space/rec2020/srgb_linear.hrx create mode 100644 spec/core_functions/color/to_space/rec2020/xyz.hrx create mode 100644 spec/core_functions/color/to_space/rec2020/xyz_d50.hrx create mode 100644 spec/core_functions/color/to_space/rgb/a98_rgb.hrx create mode 100644 spec/core_functions/color/to_space/rgb/display_p3.hrx create mode 100644 spec/core_functions/color/to_space/rgb/hsl.hrx create mode 100644 spec/core_functions/color/to_space/rgb/hwb.hrx create mode 100644 spec/core_functions/color/to_space/rgb/lab.hrx create mode 100644 spec/core_functions/color/to_space/rgb/lch.hrx create mode 100644 spec/core_functions/color/to_space/rgb/oklab.hrx create mode 100644 spec/core_functions/color/to_space/rgb/oklch.hrx create mode 100644 spec/core_functions/color/to_space/rgb/prophoto_rgb.hrx create mode 100644 spec/core_functions/color/to_space/rgb/rec2020.hrx create mode 100644 spec/core_functions/color/to_space/rgb/rgb.hrx create mode 100644 spec/core_functions/color/to_space/rgb/srgb.hrx create mode 100644 spec/core_functions/color/to_space/rgb/srgb_linear.hrx create mode 100644 spec/core_functions/color/to_space/rgb/xyz.hrx create mode 100644 spec/core_functions/color/to_space/rgb/xyz_d50.hrx create mode 100644 spec/core_functions/color/to_space/srgb/a98_rgb.hrx create mode 100644 spec/core_functions/color/to_space/srgb/display_p3.hrx create mode 100644 spec/core_functions/color/to_space/srgb/hsl.hrx create mode 100644 spec/core_functions/color/to_space/srgb/hwb.hrx create mode 100644 spec/core_functions/color/to_space/srgb/lab.hrx create mode 100644 spec/core_functions/color/to_space/srgb/lch.hrx create mode 100644 spec/core_functions/color/to_space/srgb/oklab.hrx create mode 100644 spec/core_functions/color/to_space/srgb/oklch.hrx create mode 100644 spec/core_functions/color/to_space/srgb/prophoto_rgb.hrx create mode 100644 spec/core_functions/color/to_space/srgb/rec2020.hrx create mode 100644 spec/core_functions/color/to_space/srgb/rgb.hrx create mode 100644 spec/core_functions/color/to_space/srgb/srgb.hrx create mode 100644 spec/core_functions/color/to_space/srgb/srgb_linear.hrx create mode 100644 spec/core_functions/color/to_space/srgb/xyz.hrx create mode 100644 spec/core_functions/color/to_space/srgb/xyz_d50.hrx create mode 100644 spec/core_functions/color/to_space/srgb_linear/a98_rgb.hrx create mode 100644 spec/core_functions/color/to_space/srgb_linear/display_p3.hrx create mode 100644 spec/core_functions/color/to_space/srgb_linear/hsl.hrx create mode 100644 spec/core_functions/color/to_space/srgb_linear/hwb.hrx create mode 100644 spec/core_functions/color/to_space/srgb_linear/lab.hrx create mode 100644 spec/core_functions/color/to_space/srgb_linear/lch.hrx create mode 100644 spec/core_functions/color/to_space/srgb_linear/oklab.hrx create mode 100644 spec/core_functions/color/to_space/srgb_linear/oklch.hrx create mode 100644 spec/core_functions/color/to_space/srgb_linear/prophoto_rgb.hrx create mode 100644 spec/core_functions/color/to_space/srgb_linear/rec2020.hrx create mode 100644 spec/core_functions/color/to_space/srgb_linear/rgb.hrx create mode 100644 spec/core_functions/color/to_space/srgb_linear/srgb.hrx create mode 100644 spec/core_functions/color/to_space/srgb_linear/srgb_linear.hrx create mode 100644 spec/core_functions/color/to_space/srgb_linear/xyz.hrx create mode 100644 spec/core_functions/color/to_space/srgb_linear/xyz_d50.hrx create mode 100644 spec/core_functions/color/to_space/xyz/a98_rgb.hrx create mode 100644 spec/core_functions/color/to_space/xyz/display_p3.hrx create mode 100644 spec/core_functions/color/to_space/xyz/hsl.hrx create mode 100644 spec/core_functions/color/to_space/xyz/hwb.hrx create mode 100644 spec/core_functions/color/to_space/xyz/lab.hrx create mode 100644 spec/core_functions/color/to_space/xyz/lch.hrx create mode 100644 spec/core_functions/color/to_space/xyz/oklab.hrx create mode 100644 spec/core_functions/color/to_space/xyz/oklch.hrx create mode 100644 spec/core_functions/color/to_space/xyz/prophoto_rgb.hrx create mode 100644 spec/core_functions/color/to_space/xyz/rec2020.hrx create mode 100644 spec/core_functions/color/to_space/xyz/rgb.hrx create mode 100644 spec/core_functions/color/to_space/xyz/srgb.hrx create mode 100644 spec/core_functions/color/to_space/xyz/srgb_linear.hrx create mode 100644 spec/core_functions/color/to_space/xyz/xyz.hrx create mode 100644 spec/core_functions/color/to_space/xyz/xyz_d50.hrx create mode 100644 spec/core_functions/color/to_space/xyz_d50/xyz-d50/a98_rgb.hrx create mode 100644 spec/core_functions/color/to_space/xyz_d50/xyz-d50/display_p3.hrx create mode 100644 spec/core_functions/color/to_space/xyz_d50/xyz-d50/hsl.hrx create mode 100644 spec/core_functions/color/to_space/xyz_d50/xyz-d50/hwb.hrx create mode 100644 spec/core_functions/color/to_space/xyz_d50/xyz-d50/lab.hrx create mode 100644 spec/core_functions/color/to_space/xyz_d50/xyz-d50/lch.hrx create mode 100644 spec/core_functions/color/to_space/xyz_d50/xyz-d50/oklab.hrx create mode 100644 spec/core_functions/color/to_space/xyz_d50/xyz-d50/oklch.hrx create mode 100644 spec/core_functions/color/to_space/xyz_d50/xyz-d50/prophoto_rgb.hrx create mode 100644 spec/core_functions/color/to_space/xyz_d50/xyz-d50/rec2020.hrx create mode 100644 spec/core_functions/color/to_space/xyz_d50/xyz-d50/rgb.hrx create mode 100644 spec/core_functions/color/to_space/xyz_d50/xyz-d50/srgb.hrx create mode 100644 spec/core_functions/color/to_space/xyz_d50/xyz-d50/srgb_linear.hrx create mode 100644 spec/core_functions/color/to_space/xyz_d50/xyz-d50/xyz.hrx create mode 100644 spec/core_functions/color/to_space/xyz_d50/xyz-d50/xyz_d50.hrx diff --git a/spec/core_functions/color/to_space/a98_rgb/a98_rgb.hrx b/spec/core_functions/color/to_space/a98_rgb/a98_rgb.hrx new file mode 100644 index 000000000..4bc1c0f90 --- /dev/null +++ b/spec/core_functions/color/to_space/a98_rgb/a98_rgb.hrx @@ -0,0 +1,52 @@ +<===> in_range/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0.2 0.4 0.8), a98-rgb)} + +<===> in_range/output.css +a { + b: color(a98-rgb 0.2 0.4 0.8); +} + +<===> +================================================================================ +<===> out_of_range/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb -1 0.4 2), a98-rgb)} + +<===> out_of_range/output.css +a { + b: color(a98-rgb -1 0.4 2); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb none 0.2 0.3), a98-rgb)} + +<===> missing/red/output.css +a { + b: color(a98-rgb none 0.2 0.3); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0.1 none 0.3), a98-rgb)} + +<===> missing/green/output.css +a { + b: color(a98-rgb 0.1 none 0.3); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0.1 0.2 none), a98-rgb)} + +<===> missing/blue/output.css +a { + b: color(a98-rgb 0.1 0.2 none); +} diff --git a/spec/core_functions/color/to_space/a98_rgb/display_p3.hrx b/spec/core_functions/color/to_space/a98_rgb/display_p3.hrx new file mode 100644 index 000000000..f9b4cced5 --- /dev/null +++ b/spec/core_functions/color/to_space/a98_rgb/display_p3.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0 0 0), display-p3)} + +<===> black/output.css +a { + b: color(display-p3 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 1 1 1), display-p3)} + +<===> white/output.css +a { + b: color(display-p3 1 1 1); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0.5 0.5 0.5), display-p3)} + +<===> gray/output.css +a { + b: color(display-p3 0.5039928958 0.5039928958 0.5039928958); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0.2 0.4 0.8), display-p3)} + +<===> middle/output.css +a { + b: color(display-p3 0.1198075605 0.3936533835 0.7891199167); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb -1 0.4 2), display-p3)} + +<===> out_of_range/near/output.css +a { + b: color(display-p3 -1.0713648823 0.3146416114 1.8898918553); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb -999999 0 0), display-p3)} + +<===> out_of_range/far/output.css +a { + b: color(display-p3 -352050.1162090242 -92416.3092975226 -70070.8047882944); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0.1 0.2 0.3 / 0.4), display-p3)} + +<===> alpha/partial/output.css +a { + b: color(display-p3 0.0376331272 0.1827194825 0.2895249614 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0.1 0.2 0.3 / 0.0), display-p3)} + +<===> alpha/transparent/output.css +a { + b: color(display-p3 0.0376331272 0.1827194825 0.2895249614 / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb none 0.2 0.3), display-p3)} + +<===> missing/red/output.css +a { + b: color(display-p3 none 0.1816774074 0.2892067467); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0.1 none 0.3), display-p3)} + +<===> missing/green/output.css +a { + b: color(display-p3 0.080586652 none 0.2878991958); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0.1 0.2 none), display-p3)} + +<===> missing/blue/output.css +a { + b: color(display-p3 0.0376331272 0.1827194825 none); +} diff --git a/spec/core_functions/color/to_space/a98_rgb/hsl.hrx b/spec/core_functions/color/to_space/a98_rgb/hsl.hrx new file mode 100644 index 000000000..7cd8479c2 --- /dev/null +++ b/spec/core_functions/color/to_space/a98_rgb/hsl.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0 0 0), hsl)} + +<===> black/output.css +a { + b: hsl(0, 0%, 0%); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 1 1 1), hsl)} + +<===> white/output.css +a { + b: hsl(0, 0%, 100%); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0.5 0.5 0.5), hsl)} + +<===> gray/output.css +a { + b: hsl(0, 0%, 50.3992895764%); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0.2 0.4 0.8), hsl)} + +<===> middle/output.css +a { + b: hsl(206.798941326, 132.7737671841%, 35.0907131834%); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb -1 0.4 2), hsl)} + +<===> out_of_range/near/output.css +a { + b: hsl(209.922630637, 396.8439205726%, 39.6562294521%); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb -999999 0 0), hsl)} + +<===> out_of_range/far/output.css +a { + b: hsl(0, 100%, -19096022.06943802%); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0.1 0.2 0.3 / 0.4), hsl)} + +<===> alpha/partial/output.css +a { + b: hsla(200.1785406812, 126.7161502744%, 13.1753745837%, 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0.1 0.2 0.3 / 0.0), hsl)} + +<===> alpha/transparent/output.css +a { + b: hsla(200.1785406812, 126.7161502744%, 13.1753745837%, 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb none 0.2 0.3), hsl)} + +<===> missing/red/output.css +a { + b: hsl(196.5051304863, 215.7701724503%, 9.4596338244%); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0.1 none 0.3), hsl)} + +<===> missing/green/output.css +a { + b: hsl(258.3433021907, 100%, 15.0612047755%); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0.1 0.2 none), hsl)} + +<===> missing/blue/output.css +a { + b: hsl(125.1711076789, 146.5566174361%, 7.5605855126%); +} diff --git a/spec/core_functions/color/to_space/a98_rgb/hwb.hrx b/spec/core_functions/color/to_space/a98_rgb/hwb.hrx new file mode 100644 index 000000000..3bb49a02d --- /dev/null +++ b/spec/core_functions/color/to_space/a98_rgb/hwb.hrx @@ -0,0 +1,149 @@ +<===> black/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(color(a98-rgb 0 0 0), hwb)); + +<===> black/output.css +a { + value: black; + space: hwb; + channels: 0deg 0% 100% / 1; +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(color(a98-rgb 1 1 1), hwb)); + +<===> white/output.css +a { + value: white; + space: hwb; + channels: 0deg 100% 0% / 1; +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(color(a98-rgb 0.5 0.5 0.5), hwb)); + +<===> gray/output.css +a { + value: hsl(0, 0%, 50.3992895764%); + space: hwb; + channels: 0deg 50.3992895764% 49.6007104236% / 1; +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(color(a98-rgb 0.2 0.4 0.8), hwb)); + +<===> middle/output.css +a { + value: hsl(206.798941326, 132.7737671841%, 35.0907131834%); + space: hwb; + channels: 206.798941326deg -11.500548642% 18.3180249912% / 1; +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(color(a98-rgb -1 0.4 2), hwb)); + +<===> out_of_range/near/output.css +a { + value: hsl(209.922630637, 396.8439205726%, 39.6562294521%); + space: hwb; + channels: 209.922630637deg -117.7171062569% -97.0295651612% / 1; +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(color(a98-rgb -999999 0 0), hwb)); + +<===> out_of_range/far/output.css +a { + value: hsl(0, 100%, -19096022.06943802%); + space: hwb; + channels: 180deg -38192044.13887604% 100% / 1; +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(color(a98-rgb 0.1 0.2 0.3 / 0.4), hwb)); + +<===> alpha/partial/output.css +a { + value: hsla(200.1785406812, 126.7161502744%, 13.1753745837%, 0.4); + space: hwb; + channels: 200.1785406812deg -3.519952873% 70.1292979595% / 0.4; +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(color(a98-rgb 0.1 0.2 0.3 / 0.0), hwb)); + +<===> alpha/transparent/output.css +a { + value: hsla(200.1785406812, 126.7161502744%, 13.1753745837%, 0); + space: hwb; + channels: 200.1785406812deg -3.519952873% 70.1292979595% / 0; +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(color(a98-rgb none 0.2 0.3), hwb)); + +<===> missing/red/output.css +a { + value: hsl(196.5051304863, 215.7701724503%, 9.4596338244%); + space: hwb; + channels: 196.5051304863deg -10.9514343917% 70.1292979595% / 1; +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(color(a98-rgb 0.1 none 0.3), hwb)); + +<===> missing/green/output.css +a { + value: hsl(258.3433021907, 100%, 15.0612047755%); + space: hwb; + channels: 258.3433021907deg 0% 69.8775904491% / 1; +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +a {b: color.to-space(color(a98-rgb 0.1 0.2 none), hwb)} + +<===> missing/blue/output.css +a { + b: hsl(125.1711076789, 146.5566174361%, 7.5605855126%); +} diff --git a/spec/core_functions/color/to_space/a98_rgb/lab.hrx b/spec/core_functions/color/to_space/a98_rgb/lab.hrx new file mode 100644 index 000000000..8127f5522 --- /dev/null +++ b/spec/core_functions/color/to_space/a98_rgb/lab.hrx @@ -0,0 +1,117 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0 0 0), lab)} + +<===> black/output.css +a { + b: lab(0% 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 1 1 1), lab)} + +<===> white/output.css +a { + b: lab(100% 0 0); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0.5 0.5 0.5), lab)} + +<===> gray/output.css +a { + b: lab(53.7880481926% 0 0); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0.2 0.4 0.8), lab)} + +<===> middle/output.css +a { + b: lab(42.9339299516% 6.5030561424 -63.5427502212); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb -1 0.4 2), lab)} + +<===> out_of_range/near/output.css +a { + b: lab(30.0623308533% 38.5823326773 -241.4998540297); +} + +<===> +================================================================================ +<===> out_of_range/far/options.yml +:todo: + - dart-sass # w3c/csswg-drafts#9484 + +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb -999999 0 0), lab)} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0.1 0.2 0.3 / 0.4), lab)} + +<===> alpha/partial/output.css +a { + b: lab(17.7387491045% -7.186319424 -22.7371258976 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0.1 0.2 0.3 / 0.0), lab)} + +<===> alpha/transparent/output.css +a { + b: lab(17.7387491045% -7.186319424 -22.7371258976 / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb none 0.2 0.3), lab)} + +<===> missing/red/output.css +a { + b: lab(16.8147782656% -12.534270074 -24.2693697193); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0.1 none 0.3), lab)} + +<===> missing/green/output.css +a { + b: lab(5.8200823344% 29.1326658037 -42.4044732971); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0.1 0.2 none), lab)} + +<===> missing/blue/output.css +a { + b: lab(15.5541953165% -27.655552781 23.2496799552); +} diff --git a/spec/core_functions/color/to_space/a98_rgb/lch.hrx b/spec/core_functions/color/to_space/a98_rgb/lch.hrx new file mode 100644 index 000000000..0a1827957 --- /dev/null +++ b/spec/core_functions/color/to_space/a98_rgb/lch.hrx @@ -0,0 +1,117 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0 0 0), lch)} + +<===> black/output.css +a { + b: lch(0% 0 none); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 1 1 1), lch)} + +<===> white/output.css +a { + b: lch(100% 0 none); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0.5 0.5 0.5), lch)} + +<===> gray/output.css +a { + b: lch(53.7880481926% 0 none); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0.2 0.4 0.8), lch)} + +<===> middle/output.css +a { + b: lch(42.9339299516% 63.8746494696 275.8433881087deg); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb -1 0.4 2), lch)} + +<===> out_of_range/near/output.css +a { + b: lch(30.0623308533% 244.5624171683 279.0769417748deg); +} + +<===> +================================================================================ +<===> out_of_range/far/options.yml +:todo: + - dart-sass # w3c/csswg-drafts#9484 + +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb -999999 0 0), lch)} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0.1 0.2 0.3 / 0.4), lch)} + +<===> alpha/partial/output.css +a { + b: lch(17.7387491045% 23.8457560364 252.4602846081deg / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0.1 0.2 0.3 / 0.0), lch)} + +<===> alpha/transparent/output.css +a { + b: lch(17.7387491045% 23.8457560364 252.4602846081deg / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb none 0.2 0.3), lch)} + +<===> missing/red/output.css +a { + b: lch(16.8147782656% 27.3150184488 242.6852480988deg); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0.1 none 0.3), lch)} + +<===> missing/green/output.css +a { + b: lch(5.8200823344% 51.4475613847 304.4897928318deg); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0.1 0.2 none), lch)} + +<===> missing/blue/output.css +a { + b: lch(15.5541953165% 36.1300043959 139.9466505913deg); +} diff --git a/spec/core_functions/color/to_space/a98_rgb/oklab.hrx b/spec/core_functions/color/to_space/a98_rgb/oklab.hrx new file mode 100644 index 000000000..4298fd6b5 --- /dev/null +++ b/spec/core_functions/color/to_space/a98_rgb/oklab.hrx @@ -0,0 +1,117 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0 0 0), oklab)} + +<===> black/output.css +a { + b: oklab(0% 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 1 1 1), oklab)} + +<===> white/output.css +a { + b: oklab(99.9999993474% 0.0000000001 0.0000000373); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0.5 0.5 0.5), oklab)} + +<===> gray/output.css +a { + b: oklab(60.1621101182% 0 0.0000000224); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0.2 0.4 0.8), oklab)} + +<===> middle/output.css +a { + b: oklab(52.1495256905% -0.0513578757 -0.1793591779); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb -1 0.4 2), oklab)} + +<===> out_of_range/near/output.css +a { + b: oklab(38.583187128% -2.2710957934 -0.6509941262); +} + +<===> +================================================================================ +<===> out_of_range/far/options.yml +:todo: + - dart-sass # w3c/csswg-drafts#9484 + +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb -999999 0 0), oklab)} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0.1 0.2 0.3 / 0.4), oklab)} + +<===> alpha/partial/output.css +a { + b: oklab(29.182543438% -0.0383089973 -0.0634618836 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0.1 0.2 0.3 / 0.0), oklab)} + +<===> alpha/transparent/output.css +a { + b: oklab(29.182543438% -0.0383089973 -0.0634618836 / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb none 0.2 0.3), oklab)} + +<===> missing/red/output.css +a { + b: oklab(28.2216457589% -0.0592406629 -0.068029159); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0.1 none 0.3), oklab)} + +<===> missing/green/output.css +a { + b: oklab(20.9471844335% 0.0293694057 -0.1198702832); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0.1 0.2 none), oklab)} + +<===> missing/blue/output.css +a { + b: oklab(26.2341469735% -0.0807607241 0.059543982); +} diff --git a/spec/core_functions/color/to_space/a98_rgb/oklch.hrx b/spec/core_functions/color/to_space/a98_rgb/oklch.hrx new file mode 100644 index 000000000..82b9cd759 --- /dev/null +++ b/spec/core_functions/color/to_space/a98_rgb/oklch.hrx @@ -0,0 +1,117 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0 0 0), oklch)} + +<===> black/output.css +a { + b: oklch(0% 0 none); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 1 1 1), oklch)} + +<===> white/output.css +a { + b: oklch(99.9999993474% 0.0000000373 89.8755630959deg); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0.5 0.5 0.5), oklch)} + +<===> gray/output.css +a { + b: oklch(60.1621101182% 0.0000000224 89.8755628523deg); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0.2 0.4 0.8), oklch)} + +<===> middle/output.css +a { + b: oklch(52.1495256905% 0.1865672696 254.0214147055deg); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb -1 0.4 2), oklch)} + +<===> out_of_range/near/output.css +a { + b: oklch(38.583187128% 2.3625557042 195.9945889447deg); +} + +<===> +================================================================================ +<===> out_of_range/far/options.yml +:todo: + - dart-sass # w3c/csswg-drafts#9484 + +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb -999999 0 0), oklch)} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0.1 0.2 0.3 / 0.4), oklch)} + +<===> alpha/partial/output.css +a { + b: oklch(29.182543438% 0.0741281994 238.8825662829deg / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0.1 0.2 0.3 / 0.0), oklch)} + +<===> alpha/transparent/output.css +a { + b: oklch(29.182543438% 0.0741281994 238.8825662829deg / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb none 0.2 0.3), oklch)} + +<===> missing/red/output.css +a { + b: oklch(28.2216457589% 0.0902076638 228.9502345148deg); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0.1 none 0.3), oklch)} + +<===> missing/green/output.css +a { + b: oklch(20.9471844335% 0.1234157477 283.7668356322deg); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0.1 0.2 none), oklch)} + +<===> missing/blue/output.css +a { + b: oklch(26.2341469735% 0.1003383295 143.5990619106deg); +} diff --git a/spec/core_functions/color/to_space/a98_rgb/prophoto_rgb.hrx b/spec/core_functions/color/to_space/a98_rgb/prophoto_rgb.hrx new file mode 100644 index 000000000..6a88485ab --- /dev/null +++ b/spec/core_functions/color/to_space/a98_rgb/prophoto_rgb.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0 0 0), prophoto-rgb)} + +<===> black/output.css +a { + b: color(prophoto-rgb 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 1 1 1), prophoto-rgb)} + +<===> white/output.css +a { + b: color(prophoto-rgb 1 1 1); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0.5 0.5 0.5), prophoto-rgb)} + +<===> gray/output.css +a { + b: color(prophoto-rgb 0.4287509597 0.4287509597 0.4287509597); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0.2 0.4 0.8), prophoto-rgb)} + +<===> middle/output.css +a { + b: color(prophoto-rgb 0.3168388393 0.3260606848 0.726820787); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb -1 0.4 2), prophoto-rgb)} + +<===> out_of_range/near/output.css +a { + b: color(prophoto-rgb -0.1930208925 0.2909921381 2.199240452); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb -999999 0 0), prophoto-rgb)} + +<===> out_of_range/far/output.css +a { + b: color(prophoto-rgb -18118318.905084856 -7113714.776888951 -2671576.7208059593); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0.1 0.2 0.3 / 0.4), prophoto-rgb)} + +<===> alpha/partial/output.css +a { + b: color(prophoto-rgb 0.1084709661 0.1348055136 0.2212739372 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0.1 0.2 0.3 / 0.0), prophoto-rgb)} + +<===> alpha/transparent/output.css +a { + b: color(prophoto-rgb 0.1084709661 0.1348055136 0.2212739372 / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb none 0.2 0.3), prophoto-rgb)} + +<===> missing/red/output.css +a { + b: color(prophoto-rgb none 0.1323881901 0.2209968271); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0.1 none 0.3), prophoto-rgb)} + +<===> missing/green/output.css +a { + b: color(prophoto-rgb 0.0971986374 none 0.2172679015); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0.1 0.2 none), prophoto-rgb)} + +<===> missing/blue/output.css +a { + b: color(prophoto-rgb 0.0682396395 0.1289630742 none); +} diff --git a/spec/core_functions/color/to_space/a98_rgb/rec2020.hrx b/spec/core_functions/color/to_space/a98_rgb/rec2020.hrx new file mode 100644 index 000000000..6d7c159b6 --- /dev/null +++ b/spec/core_functions/color/to_space/a98_rgb/rec2020.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0 0 0), rec2020)} + +<===> black/output.css +a { + b: color(rec2020 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 1 1 1), rec2020)} + +<===> white/output.css +a { + b: color(rec2020 1 1 1); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0.5 0.5 0.5), rec2020)} + +<===> gray/output.css +a { + b: color(rec2020 0.4543095825 0.4543095825 0.4543095825); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0.2 0.4 0.8), rec2020)} + +<===> middle/output.css +a { + b: color(rec2020 0.2185447527 0.3379568627 0.7598138887); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb -1 0.4 2), rec2020)} + +<===> out_of_range/near/output.css +a { + b: color(rec2020 -0.8122496028 0.2467395561 2.013750701); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb -999999 0 0), rec2020)} + +<===> out_of_range/far/output.css +a { + b: color(rec2020 -898316.3792876494 -332882.1030921165 -174225.0344960701); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0.1 0.2 0.3 / 0.4), rec2020)} + +<===> alpha/partial/output.css +a { + b: color(rec2020 0.0494709718 0.1182706557 0.2275848731 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0.1 0.2 0.3 / 0.0), rec2020)} + +<===> alpha/transparent/output.css +a { + b: color(rec2020 0.0494709718 0.1182706557 0.2275848731 / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb none 0.2 0.3), rec2020)} + +<===> missing/red/output.css +a { + b: color(rec2020 none 0.116069056 0.2272691007); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0.1 none 0.3), rec2020)} + +<===> missing/green/output.css +a { + b: color(rec2020 0.0393483967 none 0.2248497454); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0.1 0.2 none), rec2020)} + +<===> missing/blue/output.css +a { + b: color(rec2020 0.0350776367 0.1152389042 none); +} diff --git a/spec/core_functions/color/to_space/a98_rgb/rgb.hrx b/spec/core_functions/color/to_space/a98_rgb/rgb.hrx new file mode 100644 index 000000000..bd182a171 --- /dev/null +++ b/spec/core_functions/color/to_space/a98_rgb/rgb.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0 0 0), rgb)} + +<===> black/output.css +a { + b: black; +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 1 1 1), rgb)} + +<===> white/output.css +a { + b: white; +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0.5 0.5 0.5), rgb)} + +<===> gray/output.css +a { + b: rgb(128.5181884199, 128.5181884199, 128.5181884199); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0.2 0.4 0.8), rgb)} + +<===> middle/output.css +a { + b: hsl(206.798941326, 132.7737671841%, 35.0907131834%); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb -1 0.4 2), rgb)} + +<===> out_of_range/near/output.css +a { + b: hsl(209.922630637, 396.8439205726%, 39.6562294521%); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb -999999 0 0), rgb)} + +<===> out_of_range/far/output.css +a { + b: hsl(0, 100%, -19096022.06943802%); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0.1 0.2 0.3 / 0.4), rgb)} + +<===> alpha/partial/output.css +a { + b: hsla(200.1785406812, 126.7161502744%, 13.1753745837%, 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0.1 0.2 0.3 / 0.0), rgb)} + +<===> alpha/transparent/output.css +a { + b: hsla(200.1785406812, 126.7161502744%, 13.1753745837%, 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb none 0.2 0.3), rgb)} + +<===> missing/red/output.css +a { + b: rgb(0, 47.5348659402, 76.1702902033); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0.1 none 0.3), rgb)} + +<===> missing/green/output.css +a { + b: rgb(23.4831395969, 0, 76.8121443549); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0.1 0.2 none), rgb)} + +<===> missing/blue/output.css +a { + b: hsl(129.5300952459, 146.5566174361%, 7.5605855126%); +} diff --git a/spec/core_functions/color/to_space/a98_rgb/srgb.hrx b/spec/core_functions/color/to_space/a98_rgb/srgb.hrx new file mode 100644 index 000000000..055a335bb --- /dev/null +++ b/spec/core_functions/color/to_space/a98_rgb/srgb.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0 0 0), srgb)} + +<===> black/output.css +a { + b: color(srgb 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 1 1 1), srgb)} + +<===> white/output.css +a { + b: color(srgb 1 1 1); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0.5 0.5 0.5), srgb)} + +<===> gray/output.css +a { + b: color(srgb 0.5039928958 0.5039928958 0.5039928958); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0.2 0.4 0.8), srgb)} + +<===> middle/output.css +a { + b: color(srgb -0.1150054864 0.4006209194 0.8168197501); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb -1 0.4 2), srgb)} + +<===> out_of_range/near/output.css +a { + b: color(srgb -1.1771710626 0.4006209194 1.9702956516); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb -999999 0 0), srgb)} + +<===> out_of_range/far/output.css +a { + b: color(srgb -381920.4413887605 0 0); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0.1 0.2 0.3 / 0.4), srgb)} + +<===> alpha/partial/output.css +a { + b: color(srgb -0.0351995287 0.186411239 0.2987070204 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0.1 0.2 0.3 / 0.0), srgb)} + +<===> alpha/transparent/output.css +a { + b: color(srgb -0.0351995287 0.186411239 0.2987070204 / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb none 0.2 0.3), srgb)} + +<===> missing/red/output.css +a { + b: color(srgb none 0.186411239 0.2987070204); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0.1 none 0.3), srgb)} + +<===> missing/green/output.css +a { + b: color(srgb 0.0920907435 none 0.3012240955); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0.1 0.2 none), srgb)} + +<===> missing/blue/output.css +a { + b: color(srgb -0.0351995287 0.186411239 none); +} diff --git a/spec/core_functions/color/to_space/a98_rgb/srgb_linear.hrx b/spec/core_functions/color/to_space/a98_rgb/srgb_linear.hrx new file mode 100644 index 000000000..5331e68fd --- /dev/null +++ b/spec/core_functions/color/to_space/a98_rgb/srgb_linear.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0 0 0), srgb-linear)} + +<===> black/output.css +a { + b: color(srgb-linear 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 1 1 1), srgb-linear)} + +<===> white/output.css +a { + b: color(srgb-linear 1 1 1); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0.5 0.5 0.5), srgb-linear)} + +<===> gray/output.css +a { + b: color(srgb-linear 0.2177555281 0.2177555281 0.2177555281); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0.2 0.4 0.8), srgb-linear)} + +<===> middle/output.css +a { + b: color(srgb-linear -0.012511378 0.1333039049 0.6327296478); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb -1 0.4 2), srgb-linear)} + +<===> out_of_range/near/output.css +a { + b: color(srgb-linear -1.4514581202 0.1333039049 4.7837263649); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb -999999 0 0), srgb-linear)} + +<===> out_of_range/far/output.css +a { + b: color(srgb-linear -21924475654205.21 0 0); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0.1 0.2 0.3 / 0.4), srgb-linear)} + +<===> alpha/partial/output.css +a { + b: color(srgb-linear -0.0027244217 0.0290276622 0.0726003858 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0.1 0.2 0.3 / 0.0), srgb-linear)} + +<===> alpha/transparent/output.css +a { + b: color(srgb-linear -0.0027244217 0.0290276622 0.0726003858 / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb none 0.2 0.3), srgb-linear)} + +<===> missing/red/output.css +a { + b: color(srgb-linear none 0.0290276622 0.0726003858); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0.1 none 0.3), srgb-linear)} + +<===> missing/green/output.css +a { + b: color(srgb-linear 0.0088389143 none 0.073846514); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0.1 0.2 none), srgb-linear)} + +<===> missing/blue/output.css +a { + b: color(srgb-linear -0.0027244217 0.0290276622 none); +} diff --git a/spec/core_functions/color/to_space/a98_rgb/xyz.hrx b/spec/core_functions/color/to_space/a98_rgb/xyz.hrx new file mode 100644 index 000000000..f28f378cf --- /dev/null +++ b/spec/core_functions/color/to_space/a98_rgb/xyz.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0 0 0), xyz)} + +<===> black/output.css +a { + b: color(xyz 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 1 1 1), xyz)} + +<===> white/output.css +a { + b: color(xyz 0.9504559271 1 1.0890577508); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0.5 0.5 0.5), xyz)} + +<===> gray/output.css +a { + b: color(xyz 0.2069670324 0.2177555281 0.2371483457); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0.2 0.4 0.8), xyz)} + +<===> middle/output.css +a { + b: color(xyz 0.1567033573 0.1383525888 0.6170771483); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb -1 0.4 2), xyz)} + +<===> out_of_range/near/output.css +a { + b: color(xyz 0.3124701203 0.1320464482 4.5349169732); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb -999999 0 0), xyz)} + +<===> out_of_range/far/output.css +a { + b: color(xyz -9041452038524.758 -4661998707364.328 -423818064305.84784); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0.1 0.2 0.3 / 0.4), xyz)} + +<===> alpha/partial/output.css +a { + b: color(xyz 0.0223592858 0.0254215465 0.0724162815 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0.1 0.2 0.3 / 0.0), xyz)} + +<===> alpha/transparent/output.css +a { + b: color(xyz 0.0223592858 0.0254215465 0.0724162815 / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb none 0.2 0.3), xyz)} + +<===> missing/red/output.css +a { + b: color(xyz none 0.0235420485 0.072245418); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0.1 none 0.3), xyz)} + +<===> missing/green/output.css +a { + b: color(xyz 0.016972964 none 0.0703643493); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0.1 0.2 none), xyz)} + +<===> missing/blue/output.css +a { + b: color(xyz 0.0090314088 0.0200903956 none); +} diff --git a/spec/core_functions/color/to_space/a98_rgb/xyz_d50.hrx b/spec/core_functions/color/to_space/a98_rgb/xyz_d50.hrx new file mode 100644 index 000000000..eea89911d --- /dev/null +++ b/spec/core_functions/color/to_space/a98_rgb/xyz_d50.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0 0 0), xyz-d50)} + +<===> black/output.css +a { + b: color(xyz-d50 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 1 1 1), xyz-d50)} + +<===> white/output.css +a { + b: color(xyz-d50 0.9642956764 1 0.8251046025); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0.5 0.5 0.5), xyz-d50)} + +<===> gray/output.css +a { + b: color(xyz-d50 0.2099807143 0.2177555281 0.1796710885); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0.2 0.4 0.8), xyz-d50)} + +<===> middle/output.css +a { + b: color(xyz-d50 0.1364163751 0.1311360929 0.4645989467); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb -1 0.4 2), xyz-d50)} + +<===> out_of_range/near/output.css +a { + b: color(xyz-d50 0.1028590408 0.062612892 3.4087872511); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb -999999 0 0), xyz-d50)} + +<===> out_of_range/far/output.css +a { + b: color(xyz-d50 -9560512850977.73 -4878046244787.3545 -305274677130.3227); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0.1 0.2 0.3 / 0.4), xyz-d50)} + +<===> alpha/partial/output.css +a { + b: color(xyz-d50 0.0203795694 0.0246044104 0.054623998 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0.1 0.2 0.3 / 0.0), xyz-d50)} + +<===> alpha/transparent/output.css +a { + b: color(xyz-d50 0.0203795694 0.0246044104 0.054623998 / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb none 0.2 0.3), xyz-d50)} + +<===> missing/red/output.css +a { + b: color(xyz-d50 none 0.0226378123 0.0545009257); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0.1 none 0.3), xyz-d50)} + +<===> missing/green/output.css +a { + b: color(xyz-d50 0.0144201903 none 0.0528568205); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(a98-rgb 0.1 0.2 none), xyz-d50)} + +<===> missing/blue/output.css +a { + b: color(xyz-d50 0.0098137269 0.0201278488 none); +} diff --git a/spec/core_functions/color/to_space/display_p3/a98_rgb.hrx b/spec/core_functions/color/to_space/display_p3/a98_rgb.hrx new file mode 100644 index 000000000..e955516f6 --- /dev/null +++ b/spec/core_functions/color/to_space/display_p3/a98_rgb.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0 0 0), a98-rgb)} + +<===> black/output.css +a { + b: color(a98-rgb 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 1 1 1), a98-rgb)} + +<===> white/output.css +a { + b: color(a98-rgb 1 1 1); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0.5 0.5 0.5), a98-rgb)} + +<===> gray/output.css +a { + b: color(a98-rgb 0.4961036984 0.4961036984 0.4961036984); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0.2 0.4 0.8), a98-rgb)} + +<===> middle/output.css +a { + b: color(a98-rgb 0.2482053529 0.4050915621 0.8110198535); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 -1 0.4 2), a98-rgb)} + +<===> out_of_range/near/output.css +a { + b: color(a98-rgb -0.9267440317 0.459123582 2.1223637667); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 -999999 0 0), a98-rgb)} + +<===> out_of_range/far/output.css +a { + b: color(a98-rgb -3115569.9464425035 788230.9760095418 569282.1313176785); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0.1 0.2 0.3 / 0.4), a98-rgb)} + +<===> alpha/partial/output.css +a { + b: color(a98-rgb 0.1395855294 0.2151252811 0.3095213638 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0.1 0.2 0.3 / 0.0), a98-rgb)} + +<===> alpha/transparent/output.css +a { + b: color(a98-rgb 0.1395855294 0.2151252811 0.3095213638 / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 none 0.2 0.3), a98-rgb)} + +<===> missing/red/output.css +a { + b: color(a98-rgb none 0.2163312901 0.3099034883); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0.1 none 0.3), a98-rgb)} + +<===> missing/green/output.css +a { + b: color(a98-rgb 0.1153904633 none 0.3115106155); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0.1 0.2 none), a98-rgb)} + +<===> missing/blue/output.css +a { + b: color(a98-rgb 0.1395855294 0.2151252811 none); +} diff --git a/spec/core_functions/color/to_space/display_p3/display_p3.hrx b/spec/core_functions/color/to_space/display_p3/display_p3.hrx new file mode 100644 index 000000000..add754659 --- /dev/null +++ b/spec/core_functions/color/to_space/display_p3/display_p3.hrx @@ -0,0 +1,52 @@ +<===> in_range/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0.2 0.4 0.8), display-p3)} + +<===> in_range/output.css +a { + b: color(display-p3 0.2 0.4 0.8); +} + +<===> +================================================================================ +<===> out_of_range/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 -1 0.4 2), display-p3)} + +<===> out_of_range/output.css +a { + b: color(display-p3 -1 0.4 2); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 none 0.2 0.3), display-p3)} + +<===> missing/red/output.css +a { + b: color(display-p3 none 0.2 0.3); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0.1 none 0.3), display-p3)} + +<===> missing/green/output.css +a { + b: color(display-p3 0.1 none 0.3); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0.1 0.2 none), display-p3)} + +<===> missing/blue/output.css +a { + b: color(display-p3 0.1 0.2 none); +} diff --git a/spec/core_functions/color/to_space/display_p3/hsl.hrx b/spec/core_functions/color/to_space/display_p3/hsl.hrx new file mode 100644 index 000000000..d7a6690c1 --- /dev/null +++ b/spec/core_functions/color/to_space/display_p3/hsl.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0 0 0), hsl)} + +<===> black/output.css +a { + b: hsl(0, 0%, 0%); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 1 1 1), hsl)} + +<===> white/output.css +a { + b: hsl(0, 0%, 100%); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0.5 0.5 0.5), hsl)} + +<===> gray/output.css +a { + b: hsl(0, 0%, 50%); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0.2 0.4 0.8), hsl)} + +<===> middle/output.css +a { + b: hsl(214.974668252, 77.667451385%, 46.5940983001%); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 -1 0.4 2), hsl)} + +<===> out_of_range/near/output.css +a { + b: hsl(210.5153182162, 325.7395089334%, 48.9349840904%); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 -999999 0 0), hsl)} + +<===> out_of_range/far/output.css +a { + b: hsl(356.7852726724, 165.043052964%, -41057989.10847678%); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0.1 0.2 0.3 / 0.4), hsl)} + +<===> alpha/partial/output.css +a { + b: hsla(205.417452683, 67.7488400949%, 18.4043245596%, 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0.1 0.2 0.3 / 0.0), hsl)} + +<===> alpha/transparent/output.css +a { + b: hsla(205.417452683, 67.7488400949%, 18.4043245596%, 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 none 0.2 0.3), hsl)} + +<===> missing/red/output.css +a { + b: hsl(196.0636856013, 172.1527011916%, 11.3581215767%); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0.1 none 0.3), hsl)} + +<===> missing/green/output.css +a { + b: hsl(262.3902012265, 103.5328302701%, 15.4158592357%); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0.1 0.2 none), hsl)} + +<===> missing/blue/output.css +a { + b: hsl(96.0435532608, 143.3480015017%, 8.3456369204%); +} diff --git a/spec/core_functions/color/to_space/display_p3/hwb.hrx b/spec/core_functions/color/to_space/display_p3/hwb.hrx new file mode 100644 index 000000000..5177aca63 --- /dev/null +++ b/spec/core_functions/color/to_space/display_p3/hwb.hrx @@ -0,0 +1,149 @@ +<===> black/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(color(display-p3 0 0 0), hwb)); + +<===> black/output.css +a { + value: black; + space: hwb; + channels: 0deg 0% 100% / 1; +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(color(display-p3 1 1 1), hwb)); + +<===> white/output.css +a { + value: white; + space: hwb; + channels: 0deg 100% 0% / 1; +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(color(display-p3 0.5 0.5 0.5), hwb)); + +<===> gray/output.css +a { + value: hsl(0, 0%, 50%); + space: hwb; + channels: 0deg 50% 50% / 1; +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(color(display-p3 0.2 0.4 0.8), hwb)); + +<===> middle/output.css +a { + value: hsl(214.974668252, 77.667451385%, 46.5940983001%); + space: hwb; + channels: 214.974668252deg 10.4056496546% 17.2174530544% / 1; +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(color(display-p3 -1 0.4 2), hwb)); + +<===> out_of_range/near/output.css +a { + value: hsl(210.5153182162, 325.7395089334%, 48.9349840904%); + space: hwb; + channels: 210.5153182162deg -110.4655927824% -108.3355609633% / 1; +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(color(display-p3 -999999 0 0), hwb)); + +<===> out_of_range/far/output.css +a { + value: hsl(356.7852726724, 165.043052964%, -41057989.10847679%); + space: hwb; + channels: 176.7852726724deg -108821347.81871557% -26705269.601762004% / 1; +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(color(display-p3 0.1 0.2 0.3 / 0.4), hwb)); + +<===> alpha/partial/output.css +a { + value: hsla(205.417452683, 67.7488400949%, 18.4043245596%, 0.4); + space: hwb; + channels: 205.417452683deg 5.9356081432% 69.1269590239% / 0.4; +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(color(display-p3 0.1 0.2 0.3 / 0.0), hwb)); + +<===> alpha/transparent/output.css +a { + value: hsla(205.417452683, 67.7488400949%, 18.4043245596%, 0); + space: hwb; + channels: 205.417452683deg 5.9356081432% 69.1269590239% / 0; +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(color(display-p3 none 0.2 0.3), hwb)); + +<===> missing/red/output.css +a { + value: hsl(196.0636856013, 172.1527011916%, 11.3581215767%); + space: hwb; + channels: 196.0636856013deg -8.1951915222% 69.0885653244% / 1; +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(color(display-p3 0.1 none 0.3), hwb)); + +<===> missing/green/output.css +a { + value: hsl(262.3902012265, 103.5328302701%, 15.4158592357%); + space: hwb; + channels: 262.3902012265deg -0.5446161415% 68.6236653872% / 1; +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +a {b: color.to-space(color(display-p3 0.1 0.2 none), hwb)} + +<===> missing/blue/output.css +a { + b: hsl(96.0435532608, 143.3480015017%, 8.3456369204%); +} diff --git a/spec/core_functions/color/to_space/display_p3/lab.hrx b/spec/core_functions/color/to_space/display_p3/lab.hrx new file mode 100644 index 000000000..971c6c5c7 --- /dev/null +++ b/spec/core_functions/color/to_space/display_p3/lab.hrx @@ -0,0 +1,117 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0 0 0), lab)} + +<===> black/output.css +a { + b: lab(0% 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 1 1 1), lab)} + +<===> white/output.css +a { + b: lab(100% 0 0); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0.5 0.5 0.5), lab)} + +<===> gray/output.css +a { + b: lab(53.3889647411% 0 0); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0.2 0.4 0.8), lab)} + +<===> middle/output.css +a { + b: lab(44.25592932% 9.6200905548 -62.9637824368); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 -1 0.4 2), lab)} + +<===> out_of_range/near/output.css +a { + b: lab(49.5672259701% 56.9674744357 -222.3639264513); +} + +<===> +================================================================================ +<===> out_of_range/far/options.yml +:todo: + - dart-sass # w3c/csswg-drafts#9484 + +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 -999999 0 0), lab)} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0.1 0.2 0.3 / 0.4), lab)} + +<===> alpha/partial/output.css +a { + b: lab(20.127570568% -5.1428777609 -20.6370940019 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0.1 0.2 0.3 / 0.0), lab)} + +<===> alpha/transparent/output.css +a { + b: lab(20.127570568% -5.1428777609 -20.6370940019 / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 none 0.2 0.3), lab)} + +<===> missing/red/output.css +a { + b: lab(19.1369530209% -11.4360315052 -22.3500016909); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0.1 none 0.3), lab)} + +<===> missing/green/output.css +a { + b: lab(6.5882355616% 31.9260289697 -43.3240229048); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0.1 0.2 none), lab)} + +<===> missing/blue/output.css +a { + b: lab(18.0687084518% -22.5066779572 28.5560007052); +} diff --git a/spec/core_functions/color/to_space/display_p3/lch.hrx b/spec/core_functions/color/to_space/display_p3/lch.hrx new file mode 100644 index 000000000..546280126 --- /dev/null +++ b/spec/core_functions/color/to_space/display_p3/lch.hrx @@ -0,0 +1,117 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0 0 0), lch)} + +<===> black/output.css +a { + b: lch(0% 0 none); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 1 1 1), lch)} + +<===> white/output.css +a { + b: lch(100% 0 none); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0.5 0.5 0.5), lch)} + +<===> gray/output.css +a { + b: lch(53.3889647411% 0 none); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0.2 0.4 0.8), lch)} + +<===> middle/output.css +a { + b: lch(44.25592932% 63.6944584797 278.686909273deg); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 -1 0.4 2), lch)} + +<===> out_of_range/near/output.css +a { + b: lch(49.5672259701% 229.5452219725 284.3695672545deg); +} + +<===> +================================================================================ +<===> out_of_range/far/options.yml +:todo: + - dart-sass # w3c/csswg-drafts#9484 + +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 -999999 0 0), lch)} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0.1 0.2 0.3 / 0.4), lch)} + +<===> alpha/partial/output.css +a { + b: lch(20.127570568% 21.268258991 256.0066071682deg / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0.1 0.2 0.3 / 0.0), lch)} + +<===> alpha/transparent/output.css +a { + b: lch(20.127570568% 21.268258991 256.0066071682deg / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 none 0.2 0.3), lch)} + +<===> missing/red/output.css +a { + b: lch(19.1369530209% 25.1058836166 242.9021173179deg); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0.1 none 0.3), lch)} + +<===> missing/green/output.css +a { + b: lch(6.5882355616% 53.8167472672 306.386978589deg); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0.1 0.2 none), lch)} + +<===> missing/blue/output.css +a { + b: lch(18.0687084518% 36.3592591914 128.2437408357deg); +} diff --git a/spec/core_functions/color/to_space/display_p3/oklab.hrx b/spec/core_functions/color/to_space/display_p3/oklab.hrx new file mode 100644 index 000000000..50b1643e8 --- /dev/null +++ b/spec/core_functions/color/to_space/display_p3/oklab.hrx @@ -0,0 +1,117 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0 0 0), oklab)} + +<===> black/output.css +a { + b: oklab(0% 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 1 1 1), oklab)} + +<===> white/output.css +a { + b: oklab(99.9999993474% 0.0000000001 0.0000000373); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0.5 0.5 0.5), oklab)} + +<===> gray/output.css +a { + b: oklab(59.8180726623% 0 0.0000000223); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0.2 0.4 0.8), oklab)} + +<===> middle/output.css +a { + b: oklab(53.396034367% -0.0363375257 -0.1775421972); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 -1 0.4 2), oklab)} + +<===> out_of_range/near/output.css +a { + b: oklab(48.9249793468% -2.2018228016 -0.629877265); +} + +<===> +================================================================================ +<===> out_of_range/far/options.yml +:todo: + - dart-sass # w3c/csswg-drafts#9484 + +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 -999999 0 0), oklab)} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0.1 0.2 0.3 / 0.4), oklab)} + +<===> alpha/partial/output.css +a { + b: oklab(31.275110206% -0.0275076842 -0.0572559178 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0.1 0.2 0.3 / 0.0), oklab)} + +<===> alpha/transparent/output.css +a { + b: oklab(31.275110206% -0.0275076842 -0.0572559178 / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 none 0.2 0.3), oklab)} + +<===> missing/red/output.css +a { + b: oklab(30.2321904625% -0.0504866606 -0.0622983016); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0.1 none 0.3), oklab)} + +<===> missing/green/output.css +a { + b: oklab(21.8336364075% 0.0395324831 -0.121787855); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0.1 0.2 none), oklab)} + +<===> missing/blue/output.css +a { + b: oklab(28.5078223716% -0.0706258662 0.0690953652); +} diff --git a/spec/core_functions/color/to_space/display_p3/oklch.hrx b/spec/core_functions/color/to_space/display_p3/oklch.hrx new file mode 100644 index 000000000..2f068545a --- /dev/null +++ b/spec/core_functions/color/to_space/display_p3/oklch.hrx @@ -0,0 +1,117 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0 0 0), oklch)} + +<===> black/output.css +a { + b: oklch(0% 0 none); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 1 1 1), oklch)} + +<===> white/output.css +a { + b: oklch(99.9999993474% 0.0000000373 89.8755630959deg); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0.5 0.5 0.5), oklch)} + +<===> gray/output.css +a { + b: oklch(59.8180726623% 0.0000000223 89.8755628286deg); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0.2 0.4 0.8), oklch)} + +<===> middle/output.css +a { + b: oklch(53.396034367% 0.1812226464 258.4330310876deg); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 -1 0.4 2), oklch)} + +<===> out_of_range/near/output.css +a { + b: oklch(48.9249793468% 2.2901460693 195.9642805578deg); +} + +<===> +================================================================================ +<===> out_of_range/far/options.yml +:todo: + - dart-sass # w3c/csswg-drafts#9484 + +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 -999999 0 0), oklch)} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0.1 0.2 0.3 / 0.4), oklch)} + +<===> alpha/partial/output.css +a { + b: oklch(31.275110206% 0.0635209636 244.3387920511deg / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0.1 0.2 0.3 / 0.0), oklch)} + +<===> alpha/transparent/output.css +a { + b: oklch(31.275110206% 0.0635209636 244.3387920511deg / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 none 0.2 0.3), oklch)} + +<===> missing/red/output.css +a { + b: oklch(30.2321904625% 0.0801871641 230.9786265053deg); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0.1 none 0.3), oklch)} + +<===> missing/green/output.css +a { + b: oklch(21.8336364075% 0.1280433475 287.9834922303deg); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0.1 0.2 none), oklch)} + +<===> missing/blue/output.css +a { + b: oklch(28.5078223716% 0.0988037573 135.6275906956deg); +} diff --git a/spec/core_functions/color/to_space/display_p3/prophoto_rgb.hrx b/spec/core_functions/color/to_space/display_p3/prophoto_rgb.hrx new file mode 100644 index 000000000..54cffa414 --- /dev/null +++ b/spec/core_functions/color/to_space/display_p3/prophoto_rgb.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0 0 0), prophoto-rgb)} + +<===> black/output.css +a { + b: color(prophoto-rgb 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 1 1 1), prophoto-rgb)} + +<===> white/output.css +a { + b: color(prophoto-rgb 1 1 1); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0.5 0.5 0.5), prophoto-rgb)} + +<===> gray/output.css +a { + b: color(prophoto-rgb 0.4246723949 0.4246723949 0.4246723949); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0.2 0.4 0.8), prophoto-rgb)} + +<===> middle/output.css +a { + b: color(prophoto-rgb 0.3388390747 0.3342960169 0.7393352444); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 -1 0.4 2), prophoto-rgb)} + +<===> out_of_range/near/output.css +a { + b: color(prophoto-rgb 0.363190311 0.3948251642 2.3672559908); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 -999999 0 0), prophoto-rgb)} + +<===> out_of_range/far/output.css +a { + b: color(prophoto-rgb -72137964.95638128 -23392436.47544621 2293597.437985952); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0.1 0.2 0.3 / 0.4), prophoto-rgb)} + +<===> alpha/partial/output.css +a { + b: color(prophoto-rgb 0.1280122112 0.1488387497 0.2305514968 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0.1 0.2 0.3 / 0.0), prophoto-rgb)} + +<===> alpha/transparent/output.css +a { + b: color(prophoto-rgb 0.1280122112 0.1488387497 0.2305514968 / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 none 0.2 0.3), prophoto-rgb)} + +<===> missing/red/output.css +a { + b: color(prophoto-rgb none 0.1466998342 0.2305744173); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0.1 none 0.3), prophoto-rgb)} + +<===> missing/green/output.css +a { + b: color(prophoto-rgb 0.1061223268 none 0.2275163591); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0.1 0.2 none), prophoto-rgb)} + +<===> missing/blue/output.css +a { + b: color(prophoto-rgb 0.0911473149 0.1429690366 none); +} diff --git a/spec/core_functions/color/to_space/display_p3/rec2020.hrx b/spec/core_functions/color/to_space/display_p3/rec2020.hrx new file mode 100644 index 000000000..66bbb591b --- /dev/null +++ b/spec/core_functions/color/to_space/display_p3/rec2020.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0 0 0), rec2020)} + +<===> black/output.css +a { + b: color(rec2020 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 1 1 1), rec2020)} + +<===> white/output.css +a { + b: color(rec2020 1 1 1); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0.5 0.5 0.5), rec2020)} + +<===> gray/output.css +a { + b: color(rec2020 0.4500400319 0.4500400319 0.4500400319); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0.2 0.4 0.8), rec2020)} + +<===> middle/output.css +a { + b: color(rec2020 0.2536165098 0.3459256961 0.7717684009); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 -1 0.4 2), rec2020)} + +<===> out_of_range/near/output.css +a { + b: color(rec2020 -0.699464711 0.3562683997 2.1433011781); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 -999999 0 0), rec2020)} + +<===> out_of_range/far/output.css +a { + b: color(rec2020 -2759152.3635634547 -781900.5819995644 152514.0918455245); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0.1 0.2 0.3 / 0.4), rec2020)} + +<===> alpha/partial/output.css +a { + b: color(rec2020 0.0792630187 0.1360787348 0.2384262851 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0.1 0.2 0.3 / 0.0), rec2020)} + +<===> alpha/transparent/output.css +a { + b: color(rec2020 0.0792630187 0.1360787348 0.2384262851 / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 none 0.2 0.3), rec2020)} + +<===> missing/red/output.css +a { + b: color(rec2020 none 0.1345809807 0.2384516749); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0.1 none 0.3), rec2020)} + +<===> missing/green/output.css +a { + b: color(rec2020 0.0496776807 none 0.237203952); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0.1 0.2 none), rec2020)} + +<===> missing/blue/output.css +a { + b: color(rec2020 0.0635852545 0.1330813978 none); +} diff --git a/spec/core_functions/color/to_space/display_p3/rgb.hrx b/spec/core_functions/color/to_space/display_p3/rgb.hrx new file mode 100644 index 000000000..f447f7703 --- /dev/null +++ b/spec/core_functions/color/to_space/display_p3/rgb.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0 0 0), rgb)} + +<===> black/output.css +a { + b: black; +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 1 1 1), rgb)} + +<===> white/output.css +a { + b: white; +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0.5 0.5 0.5), rgb)} + +<===> gray/output.css +a { + b: rgb(127.5, 127.5, 127.5); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0.2 0.4 0.8), rgb)} + +<===> middle/output.css +a { + b: rgb(26.5344066192, 103.5127809071, 211.0954947112); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 -1 0.4 2), rgb)} + +<===> out_of_range/near/output.css +a { + b: hsl(210.5153182162, 325.7395089334%, 48.9349840904%); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 -999999 0 0), rgb)} + +<===> out_of_range/far/output.css +a { + b: hsl(356.7852726724, 165.043052964%, -41057989.10847678%); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0.1 0.2 0.3 / 0.4), rgb)} + +<===> alpha/partial/output.css +a { + b: rgba(15.1358007651, 51.7877986787, 78.726254489, 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0.1 0.2 0.3 / 0.0), rgb)} + +<===> alpha/transparent/output.css +a { + b: rgba(15.1358007651, 51.7877986787, 78.726254489, 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 none 0.2 0.3), rgb)} + +<===> missing/red/output.css +a { + b: rgb(0, 52.1258051255, 78.8241584227); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0.1 none 0.3), rgb)} + +<===> missing/green/output.css +a { + b: rgb(28.9866805453, 0, 80.0096532626); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0.1 0.2 none), rgb)} + +<===> missing/blue/output.css +a { + b: rgb(15.1358007651, 51.7877986787, 0); +} diff --git a/spec/core_functions/color/to_space/display_p3/srgb.hrx b/spec/core_functions/color/to_space/display_p3/srgb.hrx new file mode 100644 index 000000000..0ba1c089a --- /dev/null +++ b/spec/core_functions/color/to_space/display_p3/srgb.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0 0 0), srgb)} + +<===> black/output.css +a { + b: color(srgb 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 1 1 1), srgb)} + +<===> white/output.css +a { + b: color(srgb 1 1 1); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0.5 0.5 0.5), srgb)} + +<===> gray/output.css +a { + b: color(srgb 0.5 0.5 0.5); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0.2 0.4 0.8), srgb)} + +<===> middle/output.css +a { + b: color(srgb 0.1040564965 0.4059324741 0.8278254695); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 -1 0.4 2), srgb)} + +<===> out_of_range/near/output.css +a { + b: color(srgb -1.1046559278 0.4619691673 2.0833556096); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 -999999 0 0), srgb)} + +<===> out_of_range/far/output.css +a { + b: color(srgb -1088213.4781871557 267053.69601762 194440.1223316972); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0.1 0.2 0.3 / 0.4), srgb)} + +<===> alpha/partial/output.css +a { + b: color(srgb 0.0593560814 0.2030894066 0.3087304098 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0.1 0.2 0.3 / 0.0), srgb)} + +<===> alpha/transparent/output.css +a { + b: color(srgb 0.0593560814 0.2030894066 0.3087304098 / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 none 0.2 0.3), srgb)} + +<===> missing/red/output.css +a { + b: color(srgb none 0.2044149221 0.3091143468); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0.1 none 0.3), srgb)} + +<===> missing/green/output.css +a { + b: color(srgb 0.113673257 none 0.3137633461); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0.1 0.2 none), srgb)} + +<===> missing/blue/output.css +a { + b: color(srgb 0.0593560814 0.2030894066 none); +} diff --git a/spec/core_functions/color/to_space/display_p3/srgb_linear.hrx b/spec/core_functions/color/to_space/display_p3/srgb_linear.hrx new file mode 100644 index 000000000..3d54ca532 --- /dev/null +++ b/spec/core_functions/color/to_space/display_p3/srgb_linear.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0 0 0), srgb-linear)} + +<===> black/output.css +a { + b: color(srgb-linear 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 1 1 1), srgb-linear)} + +<===> white/output.css +a { + b: color(srgb-linear 1 1 1); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0.5 0.5 0.5), srgb-linear)} + +<===> gray/output.css +a { + b: color(srgb-linear 0.2140411405 0.2140411405 0.2140411405); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0.2 0.4 0.8), srgb-linear)} + +<===> middle/output.css +a { + b: color(srgb-linear 0.0106639349 0.1370640729 0.6520692893); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 -1 0.4 2), srgb-linear)} + +<===> out_of_range/near/output.css +a { + b: color(srgb-linear -1.2548276 0.1805133132 5.4498673233); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 -999999 0 0), srgb-linear)} + +<===> out_of_range/far/output.css +a { + b: color(srgb-linear -270587662527413.8 9290325591630.637 4337909799389.2847); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0.1 0.2 0.3 / 0.4), srgb-linear)} + +<===> alpha/partial/output.css +a { + b: color(srgb-linear 0.0048307697 0.0340755227 0.07763636 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0.1 0.2 0.3 / 0.0), srgb-linear)} + +<===> alpha/transparent/output.css +a { + b: color(srgb-linear 0.0048307697 0.0340755227 0.07763636 / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 none 0.2 0.3), srgb-linear)} + +<===> missing/red/output.css +a { + b: color(srgb-linear none 0.0344970522 0.0778331838); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0.1 none 0.3), srgb-linear)} + +<===> missing/green/output.css +a { + b: color(srgb-linear 0.0122773617 none 0.080239588); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0.1 0.2 none), srgb-linear)} + +<===> missing/blue/output.css +a { + b: color(srgb-linear 0.0048307697 0.0340755227 none); +} diff --git a/spec/core_functions/color/to_space/display_p3/xyz.hrx b/spec/core_functions/color/to_space/display_p3/xyz.hrx new file mode 100644 index 000000000..43ecb686c --- /dev/null +++ b/spec/core_functions/color/to_space/display_p3/xyz.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0 0 0), xyz)} + +<===> black/output.css +a { + b: color(xyz 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 1 1 1), xyz)} + +<===> white/output.css +a { + b: color(xyz 0.9504559271 1 1.0890577508); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0.5 0.5 0.5), xyz)} + +<===> gray/output.css +a { + b: color(xyz 0.2034366706 0.2140411405 0.233103163); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0.2 0.4 0.8), xyz)} + +<===> middle/output.css +a { + b: color(xyz 0.171095654 0.1473658922 0.6363562895); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 -1 0.4 2), xyz)} + +<===> out_of_range/near/output.css +a { + b: color(xyz 0.5306657282 0.2557107148 5.1775335161); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 -999999 0 0), xyz)} + +<===> out_of_range/far/output.css +a { + b: color(xyz -107482878101233.7 -50580177929992.33 0); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0.1 0.2 0.3 / 0.4), xyz)} + +<===> alpha/partial/output.css +a { + b: color(xyz 0.0281889097 0.0310017052 0.0779508635 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0.1 0.2 0.3 / 0.0), xyz)} + +<===> alpha/transparent/output.css +a { + b: color(xyz 0.0281889097 0.0310017052 0.0779508635 / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 none 0.2 0.3), xyz)} + +<===> missing/red/output.css +a { + b: color(xyz none 0.0287067331 0.0779508635); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0.1 none 0.3), xyz)} + +<===> missing/green/output.css +a { + b: color(xyz 0.0193940428 none 0.0764573956); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0.1 0.2 none), xyz)} + +<===> missing/blue/output.css +a { + b: color(xyz 0.0136716827 0.0251948144 none); +} diff --git a/spec/core_functions/color/to_space/display_p3/xyz_d50.hrx b/spec/core_functions/color/to_space/display_p3/xyz_d50.hrx new file mode 100644 index 000000000..5bd4149c2 --- /dev/null +++ b/spec/core_functions/color/to_space/display_p3/xyz_d50.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0 0 0), xyz-d50)} + +<===> black/output.css +a { + b: color(xyz-d50 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 1 1 1), xyz-d50)} + +<===> white/output.css +a { + b: color(xyz-d50 0.9642956764 1 0.8251046025); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0.5 0.5 0.5), xyz-d50)} + +<===> gray/output.css +a { + b: color(xyz-d50 0.2063989463 0.2140411405 0.1766063301); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0.2 0.4 0.8), xyz-d50)} + +<===> middle/output.css +a { + b: color(xyz-d50 0.1507376549 0.1401604229 0.4790971056); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 -1 0.4 2), xyz-d50)} + +<===> out_of_range/near/output.css +a { + b: color(xyz-d50 0.3020960462 0.1805869911 3.8917991009); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 -999999 0 0), xyz-d50)} + +<===> out_of_range/far/output.css +a { + b: color(xyz-d50 -113795166948730.92 -53280831691639.766 231974346711.36108); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0.1 0.2 0.3 / 0.4), xyz-d50)} + +<===> alpha/partial/output.css +a { + b: color(xyz-d50 0.0263388599 0.0302094144 0.0588154349 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0.1 0.2 0.3 / 0.0), xyz-d50)} + +<===> alpha/transparent/output.css +a { + b: color(xyz-d50 0.0263388599 0.0302094144 0.0588154349 / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 none 0.2 0.3), xyz-d50)} + +<===> missing/red/output.css +a { + b: color(xyz-d50 none 0.0277919056 0.0588259602); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0.1 none 0.3), xyz-d50)} + +<===> missing/green/output.css +a { + b: color(xyz-d50 0.0166719376 none 0.0574290645); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(display-p3 0.1 0.2 none), xyz-d50)} + +<===> missing/blue/output.css +a { + b: color(xyz-d50 0.0148301452 0.0253333744 none); +} diff --git a/spec/core_functions/color/to_space/error.hrx b/spec/core_functions/color/to_space/error.hrx new file mode 100644 index 000000000..1d0122ad3 --- /dev/null +++ b/spec/core_functions/color/to_space/error.hrx @@ -0,0 +1,89 @@ +<===> undefined_space/input.scss +@use 'sass:color'; +a {b: color.to-space(#abc, c)} + +<===> undefined_space/error +Error: $space: Unknown color space "c". + , +2 | a {b: color.to-space(#abc, c)} + | ^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> quoted_space/input.scss +@use 'sass:color'; +a {b: color.to-space(#abc, "hsl")} + +<===> quoted_space/error +Error: $space: Expected "hsl" to be an unquoted string. + , +2 | a {b: color.to-space(#abc, "hsl")} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> too_few_args/input.scss +@use 'sass:color'; +a {b: color.to-space(#abc)} + +<===> too_few_args/error +Error: Missing argument $space. + ,--> input.scss +2 | a {b: color.to-space(#abc)} + | ^^^^^^^^^^^^^^^^^^^^ invocation + ' + ,--> sass:color +1 | @function to-space($color, $space) { + | ======================== declaration + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> too_many_args/input.scss +@use 'sass:color'; +a {b: color.to-space(#abc, rgb, hsl)} + +<===> too_many_args/error +Error: Only 2 arguments allowed, but 3 were passed. + ,--> input.scss +2 | a {b: color.to-space(#abc, rgb, hsl)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ invocation + ' + ,--> sass:color +1 | @function to-space($color, $space) { + | ======================== declaration + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> type/color/input.scss +@use 'sass:color'; +a {b: color.to-space(1, rgb)} + +<===> type/color/error +Error: $color: 1 is not a color. + , +2 | a {b: color.to-space(1, rgb)} + | ^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> type/space/input.scss +@use 'sass:color'; +a {b: color.to-space(#abc, #def)} + +<===> type/space/error +Error: $space: #def is not a string. + , +2 | a {b: color.to-space(#abc, #def)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet diff --git a/spec/core_functions/color/to_space/lab/a98_rgb.hrx b/spec/core_functions/color/to_space/lab/a98_rgb.hrx new file mode 100644 index 000000000..1c92cb137 --- /dev/null +++ b/spec/core_functions/color/to_space/lab/a98_rgb.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(0% 0 0), a98-rgb)} + +<===> black/output.css +a { + b: color(a98-rgb 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(100% 0 0), a98-rgb)} + +<===> white/output.css +a { + b: color(a98-rgb 1 1 1); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(50% 0 0), a98-rgb)} + +<===> gray/output.css +a { + b: color(a98-rgb 0.4633483808 0.4633483808 0.4633483808); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(50% 50 -75), a98-rgb)} + +<===> middle/output.css +a { + b: color(a98-rgb 0.4993446464 0.3405847685 0.9621105751); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(50% -150 150), a98-rgb)} + +<===> out_of_range/near/output.css +a { + b: color(a98-rgb -0.2867930305 0.6069046769 -0.3002974486); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(50% -999999 0), a98-rgb)} + +<===> out_of_range/far/output.css +a { + b: color(a98-rgb -16.6598712578 12.1485560974 -2.4112643287); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(10% 20 30 / 0.4), a98-rgb)} + +<===> alpha/partial/output.css +a { + b: color(a98-rgb 0.2039535001 0.0808226659 -0.1242620432 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(10% 20 30 / 0.0), a98-rgb)} + +<===> alpha/transparent/output.css +a { + b: color(a98-rgb 0.2039535001 0.0808226659 -0.1242620432 / 0); +} + +<===> +================================================================================ +<===> missing/lightness/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(none 20 30), a98-rgb)} + +<===> missing/lightness/output.css +a { + b: color(a98-rgb 0.1487894196 -0.0929319593 -0.1737307511); +} + +<===> +================================================================================ +<===> missing/a/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(10% none 30), a98-rgb)} + +<===> missing/a/output.css +a { + b: color(a98-rgb 0.1557107469 0.1271683781 -0.125356279); +} + +<===> +================================================================================ +<===> missing/b/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(10% 20 none), a98-rgb)} + +<===> missing/b/output.css +a { + b: color(a98-rgb 0.1862731835 0.0856347366 0.1310611506); +} diff --git a/spec/core_functions/color/to_space/lab/display_p3.hrx b/spec/core_functions/color/to_space/lab/display_p3.hrx new file mode 100644 index 000000000..525daebee --- /dev/null +++ b/spec/core_functions/color/to_space/lab/display_p3.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(0% 0 0), display-p3)} + +<===> black/output.css +a { + b: color(display-p3 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(100% 0 0), display-p3)} + +<===> white/output.css +a { + b: color(display-p3 1 1 1); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(50% 0 0), display-p3)} + +<===> gray/output.css +a { + b: color(display-p3 0.4663266093 0.4663266093 0.4663266093); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(50% 50 -75), display-p3)} + +<===> middle/output.css +a { + b: color(display-p3 0.5227133162 0.348060966 0.9452485417); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(50% -150 150), display-p3)} + +<===> out_of_range/near/output.css +a { + b: color(display-p3 -0.3868043645 0.5969497019 -0.2718795767); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(50% -999999 0), display-p3)} + +<===> out_of_range/far/output.css +a { + b: color(display-p3 -15.0614491889 9.7148006078 -2.8909250239); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(10% 20 30 / 0.4), display-p3)} + +<===> alpha/partial/output.css +a { + b: color(display-p3 0.2036678394 0.0627355423 -0.092163728 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(10% 20 30 / 0.0), display-p3)} + +<===> alpha/transparent/output.css +a { + b: color(display-p3 0.2036678394 0.0627355423 -0.092163728 / 0); +} + +<===> +================================================================================ +<===> missing/lightness/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(none 20 30), display-p3)} + +<===> missing/lightness/output.css +a { + b: color(display-p3 0.1438618115 -0.0552726461 -0.1517242634); +} + +<===> +================================================================================ +<===> missing/a/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(10% none 30), display-p3)} + +<===> missing/a/output.css +a { + b: color(display-p3 0.1411767229 0.1061424169 -0.0944472015); +} + +<===> +================================================================================ +<===> missing/b/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(10% 20 none), display-p3)} + +<===> missing/b/output.css +a { + b: color(display-p3 0.1823778479 0.0651398083 0.1096920557); +} diff --git a/spec/core_functions/color/to_space/lab/hsl.hrx b/spec/core_functions/color/to_space/lab/hsl.hrx new file mode 100644 index 000000000..f6ed43772 --- /dev/null +++ b/spec/core_functions/color/to_space/lab/hsl.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(0% 0 0), hsl)} + +<===> black/output.css +a { + b: hsl(0, 0%, 0%); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(100% 0 0), hsl)} + +<===> white/output.css +a { + b: hsl(0, 0%, 100%); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(50% 0 0), hsl)} + +<===> gray/output.css +a { + b: hsl(0, 0%, 46.6326609284%); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(50% 50 -75), hsl)} + +<===> middle/output.css +a { + b: hsl(260.0900301863, 93.9881625698%, 65.88440774%); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(50% -150 150), hsl)} + +<===> out_of_range/near/output.css +a { + b: hsl(129.6414856733, 1083.1736448296%, 5.177606711%); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(50% -999999 0), hsl)} + +<===> out_of_range/far/output.css +a { + b: hsl(329.5753543003, 419.147137703%, -324.1554346051%); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(10% 20 30 / 0.4), hsl)} + +<===> alpha/partial/output.css +a { + b: hsla(28.3698264077, 277.3239474447%, 5.9154081349%, 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(10% 20 30 / 0.0), hsl)} + +<===> alpha/transparent/output.css +a { + b: hsla(28.3698264077, 277.3239474447%, 5.9154081349%, 0); +} + +<===> +================================================================================ +<===> missing/lightness/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(none 20 30), hsl)} + +<===> missing/lightness/output.css +a { + b: hsl(17.5913578322, 6051.6428880588%, 0%); +} + +<===> +================================================================================ +<===> missing/a/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(10% none 30), hsl)} + +<===> missing/a/output.css +a { + b: hsl(49.7972674498, 639.4765067331%, 2.0005058387%); +} + +<===> +================================================================================ +<===> missing/b/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(10% 20 none), hsl)} + +<===> missing/b/output.css +a { + b: hsl(337.1245847104, 56.1707811732%, 12.7694440441%); +} diff --git a/spec/core_functions/color/to_space/lab/hwb.hrx b/spec/core_functions/color/to_space/lab/hwb.hrx new file mode 100644 index 000000000..3c69df6ba --- /dev/null +++ b/spec/core_functions/color/to_space/lab/hwb.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(0% 0 0), hwb)} + +<===> black/output.css +a { + b: black; +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(100% 0 0), hwb)} + +<===> white/output.css +a { + b: white; +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(50% 0 0), hwb)} + +<===> gray/output.css +a { + b: hsl(0, 0%, 46.6326609284%); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(50% 50 -75), hwb)} + +<===> middle/output.css +a { + b: hsl(260.0900301863, 93.9881625698%, 65.88440774%); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(50% -150 150), hwb)} + +<===> out_of_range/near/output.css +a { + b: hsl(129.6414856733, 1083.1736448296%, 5.177606711%); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(50% -999999 0), hwb)} + +<===> out_of_range/far/output.css +a { + b: hsl(329.5753543003, 419.147137703%, -324.1554346051%); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(10% 20 30 / 0.4), hwb)} + +<===> alpha/partial/output.css +a { + b: hsla(28.3698264077, 277.3239474447%, 5.9154081349%, 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(10% 20 30 / 0.0), hwb)} + +<===> alpha/transparent/output.css +a { + b: hsla(28.3698264077, 277.3239474447%, 5.9154081349%, 0); +} + +<===> +================================================================================ +<===> missing/lightness/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(none 20 30), hwb)} + +<===> missing/lightness/output.css +a { + b: hsl(17.5913578322, 6051.6428880587%, 0.2688304082%); +} + +<===> +================================================================================ +<===> missing/a/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(10% none 30), hwb)} + +<===> missing/a/output.css +a { + b: hsl(49.7972674498, 639.4765067331%, 2.0005058387%); +} + +<===> +================================================================================ +<===> missing/b/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(10% 20 none), hwb)} + +<===> missing/b/output.css +a { + b: hsl(337.1245847104, 56.1707811732%, 12.7694440441%); +} diff --git a/spec/core_functions/color/to_space/lab/lab.hrx b/spec/core_functions/color/to_space/lab/lab.hrx new file mode 100644 index 000000000..8adb6ffcf --- /dev/null +++ b/spec/core_functions/color/to_space/lab/lab.hrx @@ -0,0 +1,52 @@ +<===> in_range/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(50% 50 -75), lab)} + +<===> in_range/output.css +a { + b: lab(50% 50 -75); +} + +<===> +================================================================================ +<===> out_of_range/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(50% -150 150), lab)} + +<===> out_of_range/output.css +a { + b: lab(50% -150 150); +} + +<===> +================================================================================ +<===> missing/lightness/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(none 20 30), lab)} + +<===> missing/lightness/output.css +a { + b: lab(none 20 30); +} + +<===> +================================================================================ +<===> missing/a/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(10% none 30), lab)} + +<===> missing/a/output.css +a { + b: lab(10% none 30); +} + +<===> +================================================================================ +<===> missing/b/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(10% 20 none), lab)} + +<===> missing/b/output.css +a { + b: lab(10% 20 none); +} diff --git a/spec/core_functions/color/to_space/lab/lch.hrx b/spec/core_functions/color/to_space/lab/lch.hrx new file mode 100644 index 000000000..c7d03aba8 --- /dev/null +++ b/spec/core_functions/color/to_space/lab/lch.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(0% 0 0), lch)} + +<===> black/output.css +a { + b: lch(0% 0 none); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(100% 0 0), lch)} + +<===> white/output.css +a { + b: lch(100% 0 none); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(50% 0 0), lch)} + +<===> gray/output.css +a { + b: lch(50% 0 none); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(50% 50 -75), lch)} + +<===> middle/output.css +a { + b: lch(50% 90.1387818866 303.690067526deg); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(50% -150 150), lch)} + +<===> out_of_range/near/output.css +a { + b: lch(50% 212.132034356 135deg); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(50% -999999 0), lch)} + +<===> out_of_range/far/output.css +a { + b: lch(50% 999999 180deg); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(10% 20 30 / 0.4), lch)} + +<===> alpha/partial/output.css +a { + b: lch(10% 36.0555127546 56.309932474deg / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(10% 20 30 / 0.0), lch)} + +<===> alpha/transparent/output.css +a { + b: lch(10% 36.0555127546 56.309932474deg / 0); +} + +<===> +================================================================================ +<===> missing/lightness/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(none 20 30), lch)} + +<===> missing/lightness/output.css +a { + b: lch(none 36.0555127546 56.309932474deg); +} + +<===> +================================================================================ +<===> missing/a/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(10% none 30), lch)} + +<===> missing/a/output.css +a { + b: lch(10% 30 90deg); +} + +<===> +================================================================================ +<===> missing/b/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(10% 20 none), lch)} + +<===> missing/b/output.css +a { + b: lch(10% 20 0deg); +} diff --git a/spec/core_functions/color/to_space/lab/oklab.hrx b/spec/core_functions/color/to_space/lab/oklab.hrx new file mode 100644 index 000000000..9b9c87a36 --- /dev/null +++ b/spec/core_functions/color/to_space/lab/oklab.hrx @@ -0,0 +1,117 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(0% 0 0), oklab)} + +<===> black/output.css +a { + b: oklab(0% 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(100% 0 0), oklab)} + +<===> white/output.css +a { + b: oklab(99.9999993474% 0.0000000001 0.0000000373); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(50% 0 0), oklab)} + +<===> gray/output.css +a { + b: oklab(56.8965513528% 0 0.0000000212); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(50% 50 -75), oklab)} + +<===> middle/output.css +a { + b: oklab(60.2352362176% 0.0926046157 -0.2110438209); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(50% -150 150), oklab)} + +<===> out_of_range/near/output.css +a { + b: oklab(53.0498197384% -0.3654345733 0.2307464671); +} + +<===> +================================================================================ +<===> out_of_range/far/options.yml +:todo: + - dart-sass + +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(50% -999999 0), oklab)} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(10% 20 30 / 0.4), oklab)} + +<===> alpha/partial/output.css +a { + b: oklab(22.8064235198% -0.061853134 0.2798052355 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(10% 20 30 / 0.0), oklab)} + +<===> alpha/transparent/output.css +a { + b: oklab(22.8064235198% -0.061853134 0.2798052355 / 0); +} + +<===> +================================================================================ +<===> missing/lightness/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(none 20 30), oklab)} + +<===> missing/lightness/output.css +a { + b: oklab(none 0.4936529727 0.1158908016); +} + +<===> +================================================================================ +<===> missing/a/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(10% none 30), oklab)} + +<===> missing/a/output.css +a { + b: oklab(22.1884319419% none 0.2838925277); +} + +<===> +================================================================================ +<===> missing/b/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(10% 20 none), oklab)} + +<===> missing/b/output.css +a { + b: oklab(23.0834632697% 0.0614345595 none); +} diff --git a/spec/core_functions/color/to_space/lab/oklch.hrx b/spec/core_functions/color/to_space/lab/oklch.hrx new file mode 100644 index 000000000..edd9be9d7 --- /dev/null +++ b/spec/core_functions/color/to_space/lab/oklch.hrx @@ -0,0 +1,117 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(0% 0 0), oklch)} + +<===> black/output.css +a { + b: oklch(0% 0 none); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(100% 0 0), oklch)} + +<===> white/output.css +a { + b: oklch(99.9999993474% 0.0000000373 89.8755630959deg); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(50% 0 0), oklch)} + +<===> gray/output.css +a { + b: oklch(56.8965513528% 0.0000000212 89.8755629589deg); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(50% 50 -75), oklch)} + +<===> middle/output.css +a { + b: oklch(60.2352362176% 0.2304671542 293.6915443769deg); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(50% -150 150), oklch)} + +<===> out_of_range/near/output.css +a { + b: oklch(53.0498197384% 0.4321878752 147.7304438462deg); +} + +<===> +================================================================================ +<===> out_of_range/far/options.yml +:todo: + - dart-sass + +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(50% -999999 0), oklch)} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(10% 20 30 / 0.4), oklch)} + +<===> alpha/partial/output.css +a { + b: oklch(22.8064235198% 0.2865602554 102.4652159995deg / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(10% 20 30 / 0.0), oklch)} + +<===> alpha/transparent/output.css +a { + b: oklch(22.8064235198% 0.2865602554 102.4652159995deg / 0); +} + +<===> +================================================================================ +<===> missing/lightness/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(none 20 30), oklch)} + +<===> missing/lightness/output.css +a { + b: oklch(none 0.5070738953 13.2116104316deg); +} + +<===> +================================================================================ +<===> missing/a/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(10% none 30), oklch)} + +<===> missing/a/output.css +a { + b: oklch(22.1884319419% 0.3083157518 112.9588813999deg); +} + +<===> +================================================================================ +<===> missing/b/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(10% 20 none), oklch)} + +<===> missing/b/output.css +a { + b: oklch(23.0834632697% 0.0614385657 359.3456866656deg); +} diff --git a/spec/core_functions/color/to_space/lab/prophoto_rgb.hrx b/spec/core_functions/color/to_space/lab/prophoto_rgb.hrx new file mode 100644 index 000000000..e4a270365 --- /dev/null +++ b/spec/core_functions/color/to_space/lab/prophoto_rgb.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(0% 0 0), prophoto-rgb)} + +<===> black/output.css +a { + b: color(prophoto-rgb 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(100% 0 0), prophoto-rgb)} + +<===> white/output.css +a { + b: color(prophoto-rgb 1 1 1); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(50% 0 0), prophoto-rgb)} + +<===> gray/output.css +a { + b: color(prophoto-rgb 0.3906698633 0.3906698633 0.3906698633); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(50% 50 -75), prophoto-rgb)} + +<===> middle/output.css +a { + b: color(prophoto-rgb 0.5179210602 0.3284958504 0.9083646327); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(50% -150 150), prophoto-rgb)} + +<===> out_of_range/near/output.css +a { + b: color(prophoto-rgb -0.1140960735 0.4800565041 -0.1694709542); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(50% -999999 0), prophoto-rgb)} + +<===> out_of_range/far/output.css +a { + b: color(prophoto-rgb -25.2096957329 15.2674513494 0.3906698633); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(10% 20 30 / 0.4), prophoto-rgb)} + +<===> alpha/partial/output.css +a { + b: color(prophoto-rgb 0.1181031255 0.0643408567 -0.0693072402 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(10% 20 30 / 0.0), prophoto-rgb)} + +<===> alpha/transparent/output.css +a { + b: color(prophoto-rgb 0.1181031255 0.0643408567 -0.0693072402 / 0); +} + +<===> +================================================================================ +<===> missing/lightness/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(none 20 30), prophoto-rgb)} + +<===> missing/lightness/output.css +a { + b: color(prophoto-rgb 0.0658841117 -0.0398403518 -0.1114464198); +} + +<===> +================================================================================ +<===> missing/a/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(10% none 30), prophoto-rgb)} + +<===> missing/a/output.css +a { + b: color(prophoto-rgb 0.085998245 0.0813505708 -0.0693072402); +} + +<===> +================================================================================ +<===> missing/b/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(10% 20 none), prophoto-rgb)} + +<===> missing/b/output.css +a { + b: color(prophoto-rgb 0.1155645311 0.0659678734 0.0827038254); +} diff --git a/spec/core_functions/color/to_space/lab/rec2020.hrx b/spec/core_functions/color/to_space/lab/rec2020.hrx new file mode 100644 index 000000000..d1cebc9b9 --- /dev/null +++ b/spec/core_functions/color/to_space/lab/rec2020.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(0% 0 0), rec2020)} + +<===> black/output.css +a { + b: color(rec2020 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(100% 0 0), rec2020)} + +<===> white/output.css +a { + b: color(rec2020 1 1 1); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(50% 0 0), rec2020)} + +<===> gray/output.css +a { + b: color(rec2020 0.4141328903 0.4141328903 0.4141328903); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(50% 50 -75), rec2020)} + +<===> middle/output.css +a { + b: color(rec2020 0.4782548936 0.3165685667 0.9316090731); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(50% -150 150), rec2020)} + +<===> out_of_range/near/output.css +a { + b: color(rec2020 -0.1395629235 0.5307299781 -0.1948126993); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(50% -999999 0), rec2020)} + +<===> out_of_range/far/output.css +a { + b: color(rec2020 -16.3406051212 10.9684505106 -2.5677472313); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(10% 20 30 / 0.4), rec2020)} + +<===> alpha/partial/output.css +a { + b: color(rec2020 0.115034011 0.0285101795 -0.0389460082 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(10% 20 30 / 0.0), rec2020)} + +<===> alpha/transparent/output.css +a { + b: color(rec2020 0.115034011 0.0285101795 -0.0389460082 / 0); +} + +<===> +================================================================================ +<===> missing/lightness/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(none 20 30), rec2020)} + +<===> missing/lightness/output.css +a { + b: color(rec2020 0.0535921266 -0.0161333028 -0.0888018246); +} + +<===> +================================================================================ +<===> missing/a/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(10% none 30), rec2020)} + +<===> missing/a/output.css +a { + b: color(rec2020 0.0677133777 0.0497451668 -0.0398688899); +} + +<===> +================================================================================ +<===> missing/b/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(10% 20 none), rec2020)} + +<===> missing/b/output.css +a { + b: color(rec2020 0.1006265985 0.0294359094 0.0515937784); +} diff --git a/spec/core_functions/color/to_space/lab/rgb.hrx b/spec/core_functions/color/to_space/lab/rgb.hrx new file mode 100644 index 000000000..bfef6ce38 --- /dev/null +++ b/spec/core_functions/color/to_space/lab/rgb.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(0% 0 0), rgb)} + +<===> black/output.css +a { + b: black; +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(100% 0 0), rgb)} + +<===> white/output.css +a { + b: white; +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(50% 0 0), rgb)} + +<===> gray/output.css +a { + b: rgb(118.9132853673, 118.9132853673, 118.9132853673); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(50% 50 -75), rgb)} + +<===> middle/output.css +a { + b: rgb(140.9956907717, 86.2404630336, 249.7700164402); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(50% -150 150), rgb)} + +<===> out_of_range/near/output.css +a { + b: hsl(129.6414856733, 1083.1736448296%, 5.177606711%); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(50% -999999 0), rgb)} + +<===> out_of_range/far/output.css +a { + b: hsl(329.5753543003, 419.147137703%, -324.1554346051%); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(10% 20 30 / 0.4), rgb)} + +<===> alpha/partial/output.css +a { + b: hsla(28.3698264077, 277.3239474447%, 5.9154081349%, 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(10% 20 30 / 0.0), rgb)} + +<===> alpha/transparent/output.css +a { + b: hsla(28.3698264077, 277.3239474447%, 5.9154081349%, 0); +} + +<===> +================================================================================ +<===> missing/lightness/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(none 20 30), rgb)} + +<===> missing/lightness/output.css +a { + b: hsl(17.5913578322, 6051.6428880588%, 0.2688304082%); +} + +<===> +================================================================================ +<===> missing/a/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(10% none 30), rgb)} + +<===> missing/a/output.css +a { + b: hsl(49.7972674498, 639.4765067331%, 2.0005058387%); +} + +<===> +================================================================================ +<===> missing/b/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(10% 20 none), rgb)} + +<===> missing/b/output.css +a { + b: rgb(50.8524583137, 14.2717063113, 28.2183712056); +} diff --git a/spec/core_functions/color/to_space/lab/srgb.hrx b/spec/core_functions/color/to_space/lab/srgb.hrx new file mode 100644 index 000000000..cb66657e5 --- /dev/null +++ b/spec/core_functions/color/to_space/lab/srgb.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(0% 0 0), srgb)} + +<===> black/output.css +a { + b: color(srgb 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(100% 0 0), srgb)} + +<===> white/output.css +a { + b: color(srgb 1 1 1); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(50% 0 0), srgb)} + +<===> gray/output.css +a { + b: color(srgb 0.4663266093 0.4663266093 0.4663266093); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(50% 50 -75), srgb)} + +<===> middle/output.css +a { + b: color(srgb 0.5529242775 0.3381978942 0.9794902605); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(50% -150 150), srgb)} + +<===> out_of_range/near/output.css +a { + b: color(srgb -0.5090486462 0.6126007804 -0.3288091982); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(50% -999999 0), srgb)} + +<===> out_of_range/far/output.css +a { + b: color(srgb -16.8284366046 10.3453279125 -3.4338747169); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(10% 20 30 / 0.4), srgb)} + +<===> alpha/partial/output.css +a { + b: color(srgb 0.2232025148 0.0502398339 -0.1048943521 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(10% 20 30 / 0.0), srgb)} + +<===> alpha/transparent/output.css +a { + b: color(srgb 0.2232025148 0.0502398339 -0.1048943521 / 0); +} + +<===> +================================================================================ +<===> missing/lightness/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(none 20 30), srgb)} + +<===> missing/lightness/output.css +a { + b: color(srgb 0.1653748669 -0.0646023407 -0.1599982587); +} + +<===> +================================================================================ +<===> missing/a/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(10% none 30), srgb)} + +<===> missing/a/output.css +a { + b: color(srgb 0.1479327069 0.1044256541 -0.1079225902); +} + +<===> +================================================================================ +<===> missing/b/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(10% 20 none), srgb)} + +<===> missing/b/output.css +a { + b: color(srgb 0.1994214052 0.0559674757 0.1106602792); +} diff --git a/spec/core_functions/color/to_space/lab/srgb_linear.hrx b/spec/core_functions/color/to_space/lab/srgb_linear.hrx new file mode 100644 index 000000000..7e424b144 --- /dev/null +++ b/spec/core_functions/color/to_space/lab/srgb_linear.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(0% 0 0), srgb-linear)} + +<===> black/output.css +a { + b: color(srgb-linear 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(100% 0 0), srgb-linear)} + +<===> white/output.css +a { + b: color(srgb-linear 1 1 1); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(50% 0 0), srgb-linear)} + +<===> gray/output.css +a { + b: color(srgb-linear 0.1841865185 0.1841865185 0.1841865185); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(50% 50 -75), srgb-linear)} + +<===> middle/output.css +a { + b: color(srgb-linear 0.2663378358 0.0935967862 0.9539760505); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(50% -150 150), srgb-linear)} + +<===> out_of_range/near/output.css +a { + b: color(srgb-linear -0.2225122082 0.3334529028 -0.0883224293); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(50% -999999 0), srgb-linear)} + +<===> out_of_range/far/output.css +a { + b: color(srgb-linear -776.4261256147 242.720788708 -17.6457042383); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(10% 20 30 / 0.4), srgb-linear)} + +<===> alpha/partial/output.css +a { + b: color(srgb-linear 0.040800043 0.0039575505 -0.01079925 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(10% 20 30 / 0.0), srgb-linear)} + +<===> alpha/transparent/output.css +a { + b: color(srgb-linear 0.040800043 0.0039575505 -0.01079925 / 0); +} + +<===> +================================================================================ +<===> missing/lightness/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(none 20 30), srgb-linear)} + +<===> missing/lightness/output.css +a { + b: color(srgb-linear 0.0233229267 -0.0053798396 -0.0219805198); +} + +<===> +================================================================================ +<===> missing/a/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(10% none 30), srgb-linear)} + +<===> missing/a/output.css +a { + b: color(srgb-linear 0.0191354647 0.0107234318 -0.0112966385); +} + +<===> +================================================================================ +<===> missing/b/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(10% 20 none), srgb-linear)} + +<===> missing/b/output.css +a { + b: color(srgb-linear 0.0329247775 0.004494318 0.0117575878); +} diff --git a/spec/core_functions/color/to_space/lab/xyz.hrx b/spec/core_functions/color/to_space/lab/xyz.hrx new file mode 100644 index 000000000..198e3a33a --- /dev/null +++ b/spec/core_functions/color/to_space/lab/xyz.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(0% 0 0), xyz)} + +<===> black/output.css +a { + b: color(xyz 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(100% 0 0), xyz)} + +<===> white/output.css +a { + b: color(xyz 0.9504559271 1 1.0890577508); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(50% 0 0), xyz)} + +<===> gray/output.css +a { + b: color(xyz 0.1750611682 0.1841865185 0.2005897556); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(50% 50 -75), xyz)} + +<===> middle/output.css +a { + b: color(xyz 0.3154783677 0.1924410425 0.9230896852); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(50% -150 150), xyz)} + +<===> out_of_range/near/output.css +a { + b: color(xyz 0.0115350469 0.1847840965 -0.0485088066); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(50% -999999 0), xyz)} + +<===> out_of_range/far/output.css +a { + b: color(xyz -236.5825482412 7.2139420412 -2.8507109462); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(10% 20 30 / 0.4), xyz)} + +<===> alpha/partial/output.css +a { + b: color(xyz 0.0162916633 0.0107263739 -0.0090046167 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(10% 20 30 / 0.0), xyz)} + +<===> alpha/transparent/output.css +a { + b: color(xyz 0.0162916633 0.0107263739 -0.0090046167 / 0); +} + +<===> +================================================================================ +<===> missing/lightness/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(none 20 30), xyz)} + +<===> missing/lightness/output.css +a { + b: color(xyz 0.0037273525 -0.0004749534 -0.0210835883); +} + +<===> +================================================================================ +<===> missing/a/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(10% none 30), xyz)} + +<===> missing/a/output.css +a { + b: color(xyz 0.0096869946 0.0109224783 -0.0090897368); +} + +<===> +================================================================================ +<===> missing/b/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(10% 20 none), xyz)} + +<===> missing/b/output.css +a { + b: color(xyz 0.0173069918 0.0110640949 0.0123481274); +} diff --git a/spec/core_functions/color/to_space/lab/xyz_d50.hrx b/spec/core_functions/color/to_space/lab/xyz_d50.hrx new file mode 100644 index 000000000..0fa0a44fe --- /dev/null +++ b/spec/core_functions/color/to_space/lab/xyz_d50.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(0% 0 0), xyz-d50)} + +<===> black/output.css +a { + b: color(xyz-d50 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(100% 0 0), xyz-d50)} + +<===> white/output.css +a { + b: color(xyz-d50 0.9642956764 1 0.8251046025); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(50% 0 0), xyz-d50)} + +<===> gray/output.css +a { + b: color(xyz-d50 0.1776102635 0.1841865185 0.1519731441); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(50% 50 -75), xyz-d50)} + +<===> middle/output.css +a { + b: color(xyz-d50 0.2886831368 0.1841865185 0.6940286511); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(50% -150 150), xyz-d50)} + +<===> out_of_range/near/output.css +a { + b: color(xyz-d50 0.018762903 0.1841865185 -0.0337971831); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(50% -999999 0), xyz-d50)} + +<===> out_of_range/far/output.css +a { + b: color(xyz-d50 -247.6132796606 0.1841865185 0.1519731441); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(10% 20 30 / 0.4), xyz-d50)} + +<===> alpha/partial/output.css +a { + b: color(xyz-d50 0.0177706181 0.0112601993 -0.0067594366 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(10% 20 30 / 0.0), xyz-d50)} + +<===> alpha/transparent/output.css +a { + b: color(xyz-d50 0.0177706181 0.0112601993 -0.0067594366 / 0); +} + +<===> +================================================================================ +<===> missing/lightness/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(none 20 30), xyz-d50)} + +<===> missing/lightness/output.css +a { + b: color(xyz-d50 0.0049533381 0 -0.0158938104); +} + +<===> +================================================================================ +<===> missing/a/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(10% none 30), xyz-d50)} + +<===> missing/a/output.css +a { + b: color(xyz-d50 0.0108581615 0.0112601993 -0.0067594366); +} + +<===> +================================================================================ +<===> missing/b/input.scss +@use 'sass:color'; +a {b: color.to-space(lab(10% 20 none), xyz-d50)} + +<===> missing/b/output.css +a { + b: color(xyz-d50 0.0177706181 0.0112601993 0.0092908422); +} diff --git a/spec/core_functions/color/to_space/oklab/a98_rgb.hrx b/spec/core_functions/color/to_space/oklab/a98_rgb.hrx new file mode 100644 index 000000000..b60330f61 --- /dev/null +++ b/spec/core_functions/color/to_space/oklab/a98_rgb.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(0% 0 0), a98-rgb)} + +<===> black/output.css +a { + b: color(a98-rgb 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(100% 0 0), a98-rgb)} + +<===> white/output.css +a { + b: color(a98-rgb 0.9999999799 1.000000009 1.0000001143); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(50% 0 0), a98-rgb)} + +<===> gray/output.css +a { + b: color(a98-rgb 0.3884711027 0.388471114 0.3884711549); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(50% 0.2 -0.3), a98-rgb)} + +<===> middle/output.css +a { + b: color(a98-rgb 0.4723956119 -0.3075477289 0.9952387413); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(50% -2 2), a98-rgb)} + +<===> out_of_range/near/output.css +a { + b: color(a98-rgb -0.8953481069 1.6153083897 -3.014009118); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(50% -999999 0), a98-rgb)} + +<===> out_of_range/far/output.css +a { + b: color(a98-rgb -66665446.96678426 49015676.54589439 12422985.883539313); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(10% 0.2 0.3 / 0.4), a98-rgb)} + +<===> alpha/partial/output.css +a { + b: color(a98-rgb 0.2172671914 -0.1122840454 -0.2493572785 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(10% 0.2 0.3 / 0.0), a98-rgb)} + +<===> alpha/transparent/output.css +a { + b: color(a98-rgb 0.2172671914 -0.1122840454 -0.2493572785 / 0); +} + +<===> +================================================================================ +<===> missing/lightness/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(none 0.2 0.3), a98-rgb)} + +<===> missing/lightness/output.css +a { + b: color(a98-rgb 0.0734724303 0.1640446338 -0.3638546832); +} + +<===> +================================================================================ +<===> missing/a/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(10% none 0.3), a98-rgb)} + +<===> missing/a/output.css +a { + b: color(a98-rgb 0.1171245434 0.0794773258 -0.2290203701); +} + +<===> +================================================================================ +<===> missing/b/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(10% 0.2 none), a98-rgb)} + +<===> missing/b/output.css +a { + b: color(a98-rgb 0.1433510554 -0.0992363406 0.0248601585); +} diff --git a/spec/core_functions/color/to_space/oklab/display_p3.hrx b/spec/core_functions/color/to_space/oklab/display_p3.hrx new file mode 100644 index 000000000..0b4d332d7 --- /dev/null +++ b/spec/core_functions/color/to_space/oklab/display_p3.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(0% 0 0), display-p3)} + +<===> black/output.css +a { + b: color(display-p3 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(100% 0 0), display-p3)} + +<===> white/output.css +a { + b: color(display-p3 0.9999999764 1.0000000074 1.0000001047); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(50% 0 0), display-p3)} + +<===> gray/output.css +a { + b: color(display-p3 0.3885728491 0.3885728621 0.3885729031); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(50% 0.2 -0.3), display-p3)} + +<===> middle/output.css +a { + b: color(display-p3 0.5192153014 -0.2770640957 0.9741963252); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(50% -2 2), display-p3)} + +<===> out_of_range/near/output.css +a { + b: color(display-p3 -1.13414471 1.5411090766 -2.7763098547); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(50% -999999 0), display-p3)} + +<===> out_of_range/far/output.css +a { + b: color(display-p3 -16964712.17081906 11051276.299069608 2566313.802188239); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(10% 0.2 0.3 / 0.4), display-p3)} + +<===> alpha/partial/output.css +a { + b: color(display-p3 0.2245541345 -0.0715469676 -0.2325234092 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(10% 0.2 0.3 / 0.0), display-p3)} + +<===> alpha/transparent/output.css +a { + b: color(display-p3 0.2245541345 -0.0715469676 -0.2325234092 / 0); +} + +<===> +================================================================================ +<===> missing/lightness/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(none 0.2 0.3), display-p3)} + +<===> missing/lightness/output.css +a { + b: color(display-p3 0.011277471 0.1430562743 -0.3528893187); +} + +<===> +================================================================================ +<===> missing/a/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(10% none 0.3), display-p3)} + +<===> missing/a/output.css +a { + b: color(display-p3 0.0980260328 0.0512840259 -0.2115516265); +} + +<===> +================================================================================ +<===> missing/b/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(10% 0.2 none), display-p3)} + +<===> missing/b/output.css +a { + b: color(display-p3 0.1380887377 -0.0636630597 0.0058108376); +} diff --git a/spec/core_functions/color/to_space/oklab/hsl.hrx b/spec/core_functions/color/to_space/oklab/hsl.hrx new file mode 100644 index 000000000..5380ad85c --- /dev/null +++ b/spec/core_functions/color/to_space/oklab/hsl.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(0% 0 0), hsl)} + +<===> black/output.css +a { + b: hsl(0, 0%, 0%); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(100% 0 0), hsl)} + +<===> white/output.css +a { + b: hsl(43.8135971986, 172.5242105081%, 100.0000042145%); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(50% 0 0), hsl)} + +<===> gray/output.css +a { + b: hsl(223.8135972091, 0.0000078676%, 38.8572876766%); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(50% 0.2 -0.3), hsl)} + +<===> middle/output.css +a { + b: hsl(280.3037191595, 185.1123260276%, 35.6118905417%); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(50% -2 2), hsl)} + +<===> out_of_range/near/output.css +a { + b: hsl(280.1310039328, 338.5767145732%, -66.3157250379%); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(50% -999999 0), hsl)} + +<===> out_of_range/far/output.css +a { + b: hsl(340.1123890362, 426.4426890198%, -360094010.73043364%); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(10% 0.2 0.3 / 0.4), hsl)} + +<===> alpha/partial/output.css +a { + b: hsla(19.0047457513, 6337.7067481883%, 0.3924710109%, 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(10% 0.2 0.3 / 0.0), hsl)} + +<===> alpha/transparent/output.css +a { + b: hsla(19.0047457513, 6337.7067481883%, 0.3924710109%, 0); +} + +<===> +================================================================================ +<===> missing/lightness/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(none 0.2 0.3), hsl)} + +<===> missing/lightness/output.css +a { + b: hsl(261.4365788529, 230.0242883505%, 0%); +} + +<===> +================================================================================ +<===> missing/a/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(10% none 0.3), hsl)} + +<===> missing/a/output.css +a { + b: hsl(229.5442945473, 280.5312633728%, -5.8764819359%); +} + +<===> +================================================================================ +<===> missing/b/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(10% 0.2 none), hsl)} + +<===> missing/b/output.css +a { + b: hsl(339.4567046558, 263.6331199652%, 4.40110336%); +} diff --git a/spec/core_functions/color/to_space/oklab/hwb.hrx b/spec/core_functions/color/to_space/oklab/hwb.hrx new file mode 100644 index 000000000..c26650e30 --- /dev/null +++ b/spec/core_functions/color/to_space/oklab/hwb.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(0% 0 0), hwb)} + +<===> black/output.css +a { + b: black; +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(100% 0 0), hwb)} + +<===> white/output.css +a { + b: hsl(43.8135971652, 172.5242119439%, 100.0000042145%); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(50% 0 0), hwb)} + +<===> gray/output.css +a { + b: hsl(223.8135972091, 0.0000078676%, 38.8572876766%); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(50% 0.2 -0.3), hwb)} + +<===> middle/output.css +a { + b: hsl(280.3037191595, 185.1123260276%, 35.6118905417%); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(50% -2 2), hwb)} + +<===> out_of_range/near/output.css +a { + b: hsl(280.1310039328, 338.5767145732%, -66.3157250379%); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(50% -999999 0), hwb)} + +<===> out_of_range/far/output.css +a { + b: hsl(340.1123890362, 426.4426890198%, -360094010.73043364%); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(10% 0.2 0.3 / 0.4), hwb)} + +<===> alpha/partial/output.css +a { + b: hsla(19.0047457513, 6337.7067481883%, 0.3924710109%, 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(10% 0.2 0.3 / 0.0), hwb)} + +<===> alpha/transparent/output.css +a { + b: hsla(19.0047457513, 6337.7067481883%, 0.3924710109%, 0); +} + +<===> +================================================================================ +<===> missing/lightness/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(none 0.2 0.3), hwb)} + +<===> missing/lightness/output.css +a { + b: hsl(261.4365788529, 230.0242883505%, -11.2533870657%); +} + +<===> +================================================================================ +<===> missing/a/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(10% none 0.3), hwb)} + +<===> missing/a/output.css +a { + b: hsl(229.5442945473, 280.5312633728%, -5.8764819359%); +} + +<===> +================================================================================ +<===> missing/b/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(10% 0.2 none), hwb)} + +<===> missing/b/output.css +a { + b: hsl(339.4567046558, 263.6331199652%, 4.40110336%); +} diff --git a/spec/core_functions/color/to_space/oklab/lab.hrx b/spec/core_functions/color/to_space/oklab/lab.hrx new file mode 100644 index 000000000..2e9c40a7d --- /dev/null +++ b/spec/core_functions/color/to_space/oklab/lab.hrx @@ -0,0 +1,121 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(0% 0 0), lab)} + +<===> black/output.css +a { + b: lab(0% 0 0); +} + +<===> +================================================================================ +<===> white/options.yml +:todo: + - dart-sass + +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(100% 0 0), lab)} + +<===> white/output.css +a { + b: okoklab(99.9999993474% 0.0000000001 0.0000000373); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(50% 0 0), lab)} + +<===> gray/output.css +a { + b: lab(42.0000002803% 0.0000000582 -0.0000070926); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(50% 0.2 -0.3), lab)} + +<===> middle/output.css +a { + b: lab(33.0422497851% 107.2195839075 -107.9836652126); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(50% -2 2), lab)} + +<===> out_of_range/near/output.css +a { + b: lab(93.303705573% -6771.9585744642 15769.0769791975); +} + +<===> +================================================================================ +<===> out_of_range/far/options.yml +:todo: + - dart-sass + +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(50% -999999 0), lab)} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(10% 0.2 0.3 / 0.4), lab)} + +<===> alpha/partial/output.css +a { + b: lab(2.4858192097% 37.8559749186 70.2237149791 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(10% 0.2 0.3 / 0.0), lab)} + +<===> alpha/transparent/output.css +a { + b: lab(2.4858192097% 37.8559749186 70.2237149791 / 0); +} + +<===> +================================================================================ +<===> missing/lightness/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(none 0.2 0.3), lab)} + +<===> missing/lightness/output.css +a { + b: lab(none -64.726469561 159.0711423642); +} + +<===> +================================================================================ +<===> missing/a/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(10% none 0.3), lab)} + +<===> missing/a/output.css +a { + b: lab(2.4372581534% none 58.4055225293); +} + +<===> +================================================================================ +<===> missing/b/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(10% 0.2 none), lab)} + +<===> missing/b/output.css +a { + b: lab(0.4263319128% 27.5478510774 none); +} diff --git a/spec/core_functions/color/to_space/oklab/lch.hrx b/spec/core_functions/color/to_space/oklab/lch.hrx new file mode 100644 index 000000000..7011ef32b --- /dev/null +++ b/spec/core_functions/color/to_space/oklab/lch.hrx @@ -0,0 +1,126 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(0% 0 0), lch)} + +<===> black/output.css +a { + b: lch(0% 0 none); +} + +<===> +================================================================================ +<===> white/options.yml +:todo: + - dart-sass + +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(100% 0 0), lch)} + +<===> white/output.css +a { + b: lch(100% 0 none); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(50% 0 0), lch)} + +<===> gray/output.css +a { + b: lch(42.0000002803% 0.0000070929 270.4699000403deg); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(50% 0.2 -0.3), lch)} + +<===> middle/output.css +a { + b: lch(33.0422497851% 152.1726359305 314.7965716122deg); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(50% -2 2), lch)} + +<===> out_of_range/near/output.css +a { + b: lch(93.303705573% 17161.6785807833 113.240884837deg); +} + +<===> +================================================================================ +<===> out_of_range/far/options.yml +:todo: + - dart-sass + +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(50% -999999 0), lch)} + +<===> out_of_range/far/output.css +a { + b: lch(50% 999999 180deg); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(10% 0.2 0.3 / 0.4), lch)} + +<===> alpha/partial/output.css +a { + b: lch(2.4858192097% 79.7774716477 61.6719233557deg / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(10% 0.2 0.3 / 0.0), lch)} + +<===> alpha/transparent/output.css +a { + b: lch(2.4858192097% 79.7774716477 61.6719233557deg / 0); +} + +<===> +================================================================================ +<===> missing/lightness/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(none 0.2 0.3), lch)} + +<===> missing/lightness/output.css +a { + b: lch(none 171.7356811932 112.1415379531deg); +} + +<===> +================================================================================ +<===> missing/a/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(10% none 0.3), lch)} + +<===> missing/a/output.css +a { + b: lch(2.4372581534% 59.0755529992 98.6375851746deg); +} + +<===> +================================================================================ +<===> missing/b/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(10% 0.2 none), lch)} + +<===> missing/b/output.css +a { + b: lch(0.4263319128% 27.5527624534 1.0818401525deg); +} diff --git a/spec/core_functions/color/to_space/oklab/oklab.hrx b/spec/core_functions/color/to_space/oklab/oklab.hrx new file mode 100644 index 000000000..136acf6ea --- /dev/null +++ b/spec/core_functions/color/to_space/oklab/oklab.hrx @@ -0,0 +1,52 @@ +<===> in_range/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(50% 0.2 -0.3), oklab)} + +<===> in_range/output.css +a { + b: oklab(50% 0.2 -0.3); +} + +<===> +================================================================================ +<===> out_of_range/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(50% -2 2), oklab)} + +<===> out_of_range/output.css +a { + b: oklab(50% -2 2); +} + +<===> +================================================================================ +<===> missing/lightness/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(none 0.2 0.3), oklab)} + +<===> missing/lightness/output.css +a { + b: oklab(none 0.2 0.3); +} + +<===> +================================================================================ +<===> missing/a/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(10% none 0.3), oklab)} + +<===> missing/a/output.css +a { + b: oklab(10% none 0.3); +} + +<===> +================================================================================ +<===> missing/b/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(10% 0.2 none), oklab)} + +<===> missing/b/output.css +a { + b: oklab(10% 0.2 none); +} diff --git a/spec/core_functions/color/to_space/oklab/oklch.hrx b/spec/core_functions/color/to_space/oklab/oklch.hrx new file mode 100644 index 000000000..fb31d8a91 --- /dev/null +++ b/spec/core_functions/color/to_space/oklab/oklch.hrx @@ -0,0 +1,117 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(0% 0 0), oklch)} + +<===> black/output.css +a { + b: oklch(0% 0 none); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(100% 0 0), oklch)} + +<===> white/output.css +a { + b: oklch(100% 0 none); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(50% 0 0), oklch)} + +<===> gray/output.css +a { + b: oklch(50% 0 none); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(50% 0.2 -0.3), oklch)} + +<===> middle/output.css +a { + b: oklch(50% 0.3605551275 303.690067526deg); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(50% -2 2), oklch)} + +<===> out_of_range/near/output.css +a { + b: oklch(50% 2.8284271247 135deg); +} + +<===> +================================================================================ +<===> out_of_range/far/options.yml +:todo: + - dart-sass + +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(50% -999999 0), oklch)} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(10% 0.2 0.3 / 0.4), oklch)} + +<===> alpha/partial/output.css +a { + b: oklch(10% 0.3605551275 56.309932474deg / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(10% 0.2 0.3 / 0.0), oklch)} + +<===> alpha/transparent/output.css +a { + b: oklch(10% 0.3605551275 56.309932474deg / 0); +} + +<===> +================================================================================ +<===> missing/lightness/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(none 0.2 0.3), oklch)} + +<===> missing/lightness/output.css +a { + b: oklch(none 0.3605551275 56.309932474deg); +} + +<===> +================================================================================ +<===> missing/a/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(10% none 0.3), oklch)} + +<===> missing/a/output.css +a { + b: oklch(10% 0.3 90deg); +} + +<===> +================================================================================ +<===> missing/b/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(10% 0.2 none), oklch)} + +<===> missing/b/output.css +a { + b: oklch(10% 0.2 0deg); +} diff --git a/spec/core_functions/color/to_space/oklab/prophoto_rgb.hrx b/spec/core_functions/color/to_space/oklab/prophoto_rgb.hrx new file mode 100644 index 000000000..4cb5ed17c --- /dev/null +++ b/spec/core_functions/color/to_space/oklab/prophoto_rgb.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(0% 0 0), prophoto-rgb)} + +<===> black/output.css +a { + b: color(prophoto-rgb 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(100% 0 0), prophoto-rgb)} + +<===> white/output.css +a { + b: color(prophoto-rgb 1.0000000036 1.0000000099 1.0000001263); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(50% 0 0), prophoto-rgb)} + +<===> gray/output.css +a { + b: color(prophoto-rgb 0.3149802636 0.3149802656 0.3149803022); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(50% 0.2 -0.3), prophoto-rgb)} + +<===> middle/output.css +a { + b: color(prophoto-rgb 0.4918881954 -0.0624904068 0.9386035712); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(50% -2 2), prophoto-rgb)} + +<===> out_of_range/near/output.css +a { + b: color(prophoto-rgb -1.4344246827 1.449741205 -3.5981874982); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(50% -999999 0), prophoto-rgb)} + +<===> out_of_range/far/output.css +a { + b: color(prophoto-rgb -2922133015.648196 1810415223.5562131 574653584.8087448); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(10% 0.2 0.3 / 0.4), prophoto-rgb)} + +<===> alpha/partial/output.css +a { + b: color(prophoto-rgb 0.1071252394 -0.0424411714 -0.1726130102 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(10% 0.2 0.3 / 0.0), prophoto-rgb)} + +<===> alpha/transparent/output.css +a { + b: color(prophoto-rgb 0.1071252394 -0.0424411714 -0.1726130102 / 0); +} + +<===> +================================================================================ +<===> missing/lightness/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(none 0.2 0.3), prophoto-rgb)} + +<===> missing/lightness/output.css +a { + b: color(prophoto-rgb -0.0831372042 0.0891975511 -0.2723906896); +} + +<===> +================================================================================ +<===> missing/a/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(10% none 0.3), prophoto-rgb)} + +<===> missing/a/output.css +a { + b: color(prophoto-rgb 0.0211561039 0.0415370447 -0.1548071681); +} + +<===> +================================================================================ +<===> missing/b/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(10% 0.2 none), prophoto-rgb)} + +<===> missing/b/output.css +a { + b: color(prophoto-rgb 0.0759873356 -0.0414646645 0.0022071932); +} diff --git a/spec/core_functions/color/to_space/oklab/rec2020.hrx b/spec/core_functions/color/to_space/oklab/rec2020.hrx new file mode 100644 index 000000000..c8f2c25f2 --- /dev/null +++ b/spec/core_functions/color/to_space/oklab/rec2020.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(0% 0 0), rec2020)} + +<===> black/output.css +a { + b: color(rec2020 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(100% 0 0), rec2020)} + +<===> white/output.css +a { + b: color(rec2020 0.9999999872 1.0000000081 1.0000001161); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(50% 0 0), rec2020)} + +<===> gray/output.css +a { + b: color(rec2020 0.3319485728 0.3319485809 0.3319486233); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(50% 0.2 -0.3), rec2020)} + +<===> middle/output.css +a { + b: color(rec2020 0.4424432787 -0.1481489957 0.9623483669); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(50% -2 2), rec2020)} + +<===> out_of_range/near/output.css +a { + b: color(rec2020 -0.9884282298 1.5152602347 -3.0630021095); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(50% -999999 0), rec2020)} + +<===> out_of_range/far/output.css +a { + b: color(rec2020 -56131669.11203061 38257478.199239716 10955271.878602052); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(10% 0.2 0.3 / 0.4), rec2020)} + +<===> alpha/partial/output.css +a { + b: color(rec2020 0.1199235027 -0.0200899821 -0.1691453887 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(10% 0.2 0.3 / 0.0), rec2020)} + +<===> alpha/transparent/output.css +a { + b: color(rec2020 0.1199235027 -0.0200899821 -0.1691453887 / 0); +} + +<===> +================================================================================ +<===> missing/lightness/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(none 0.2 0.3), rec2020)} + +<===> missing/lightness/output.css +a { + b: color(rec2020 -0.002787099 0.0709375609 -0.2911317053); +} + +<===> +================================================================================ +<===> missing/a/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(10% none 0.3), rec2020)} + +<===> missing/a/output.css +a { + b: color(rec2020 0.028710049 0.0171073657 -0.1474743881); +} + +<===> +================================================================================ +<===> missing/b/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(10% 0.2 none), rec2020)} + +<===> missing/b/output.css +a { + b: color(rec2020 0.052988574 -0.0188512434 0.0014800891); +} diff --git a/spec/core_functions/color/to_space/oklab/rgb.hrx b/spec/core_functions/color/to_space/oklab/rgb.hrx new file mode 100644 index 000000000..bb235eb8e --- /dev/null +++ b/spec/core_functions/color/to_space/oklab/rgb.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(0% 0 0), rgb)} + +<===> black/output.css +a { + b: black; +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(100% 0 0), rgb)} + +<===> white/output.css +a { + b: hsl(43.8135971986, 172.5242105081%, 100.0000042145%); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(50% 0 0), rgb)} + +<===> gray/output.css +a { + b: rgb(99.0860757797, 99.0860799859, 99.0860913711); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(50% 0.2 -0.3), rgb)} + +<===> middle/output.css +a { + b: hsl(280.3037191595, 185.1123260276%, 35.6118905417%); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(50% -2 2), rgb)} + +<===> out_of_range/near/output.css +a { + b: hsl(280.1310039328, 338.5767145732%, -66.3157250379%); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(50% -999999 0), rgb)} + +<===> out_of_range/far/output.css +a { + b: hsl(340.1123890362, 426.4426890198%, -360094010.73043364%); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(10% 0.2 0.3 / 0.4), rgb)} + +<===> alpha/partial/output.css +a { + b: hsla(19.0047457513, 6337.7067481883%, 0.3924710109%, 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(10% 0.2 0.3 / 0.0), rgb)} + +<===> alpha/transparent/output.css +a { + b: hsla(19.0047457513, 6337.7067481883%, 0.3924710109%, 0); +} + +<===> +================================================================================ +<===> missing/lightness/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(none 0.2 0.3), rgb)} + +<===> missing/lightness/output.css +a { + b: hsl(261.4365788529, 230.0242883505%, -11.2533870657%); +} + +<===> +================================================================================ +<===> missing/a/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(10% none 0.3), rgb)} + +<===> missing/a/output.css +a { + b: hsl(229.5442945473, 280.5312633728%, -5.8764819359%); +} + +<===> +================================================================================ +<===> missing/b/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(10% 0.2 none), rgb)} + +<===> missing/b/output.css +a { + b: hsl(339.4567046558, 263.6331199652%, 4.40110336%); +} diff --git a/spec/core_functions/color/to_space/oklab/srgb.hrx b/spec/core_functions/color/to_space/oklab/srgb.hrx new file mode 100644 index 000000000..44d83be54 --- /dev/null +++ b/spec/core_functions/color/to_space/oklab/srgb.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(0% 0 0), srgb)} + +<===> black/output.css +a { + b: color(srgb 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(100% 0 0), srgb)} + +<===> white/output.css +a { + b: color(srgb 0.9999999694 1.0000000087 1.0000001149); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(50% 0 0), srgb)} + +<===> gray/output.css +a { + b: color(srgb 0.3885728462 0.3885728627 0.3885729073); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(50% 0.2 -0.3), srgb)} + +<===> middle/output.css +a { + b: color(srgb 0.5825328265 -0.3031010838 1.0153388947); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(50% -2 2), srgb)} + +<===> out_of_range/near/output.css +a { + b: color(srgb -1.4213940143 1.5821387804 -2.9084532812); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(50% -999999 0), srgb)} + +<===> out_of_range/far/output.css +a { + b: color(srgb -18956885.930884026 11755005.716275353 1575236.4989373833); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(10% 0.2 0.3 / 0.4), srgb)} + +<===> alpha/partial/output.css +a { + b: color(srgb 0.2526613275 -0.0872393682 -0.2448119073 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(10% 0.2 0.3 / 0.0), srgb)} + +<===> alpha/transparent/output.css +a { + b: color(srgb 0.2526613275 -0.0872393682 -0.2448119073 / 0); +} + +<===> +================================================================================ +<===> missing/lightness/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(none 0.2 0.3), srgb)} + +<===> missing/lightness/output.css +a { + b: color(srgb -0.0386443242 0.1463213645 -0.3713891058); +} + +<===> +================================================================================ +<===> missing/a/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(10% none 0.3), srgb)} + +<===> missing/a/output.css +a { + b: color(srgb 0.1060888708 0.0486334832 -0.2236185095); +} + +<===> +================================================================================ +<===> missing/b/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(10% 0.2 none), srgb)} + +<===> missing/b/output.css +a { + b: color(srgb 0.1600386946 -0.0720166274 0.0074363895); +} diff --git a/spec/core_functions/color/to_space/oklab/srgb_linear.hrx b/spec/core_functions/color/to_space/oklab/srgb_linear.hrx new file mode 100644 index 000000000..3a84fbdb4 --- /dev/null +++ b/spec/core_functions/color/to_space/oklab/srgb_linear.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(0% 0 0), srgb-linear)} + +<===> black/output.css +a { + b: color(srgb-linear 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(100% 0 0), srgb-linear)} + +<===> white/output.css +a { + b: color(srgb-linear 0.9999999305 1.0000000197 1.0000002613); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(50% 0 0), srgb-linear)} + +<===> gray/output.css +a { + b: color(srgb-linear 0.1249999913 0.1250000025 0.1250000327); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(50% 0.2 -0.3), srgb-linear)} + +<===> middle/output.css +a { + b: color(srgb-linear 0.2985384134 -0.074783816 1.0352499891); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(50% -2 2), srgb-linear)} + +<===> out_of_range/near/output.css +a { + b: color(srgb-linear -2.2401626848 2.8707758733 -11.9264035632); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(50% -999999 0), srgb-linear)} + +<===> out_of_range/far/output.css +a { + b: color(srgb-linear -257534189123413888 81795409108779168 657391329523393.8); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(10% 0.2 0.3 / 0.4), srgb-linear)} + +<===> alpha/partial/output.css +a { + b: color(srgb-linear 0.0519480297 -0.0081553321 -0.0488237803 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(10% 0.2 0.3 / 0.0), srgb-linear)} + +<===> alpha/transparent/output.css +a { + b: color(srgb-linear 0.0519480297 -0.0081553321 -0.0488237803 / 0); +} + +<===> +================================================================================ +<===> missing/lightness/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(none 0.2 0.3), srgb-linear)} + +<===> missing/lightness/output.css +a { + b: color(srgb-linear -0.0029910468 0.0187728311 -0.1136916938); +} + +<===> +================================================================================ +<===> missing/a/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(10% none 0.3), srgb-linear)} + +<===> missing/a/output.css +a { + b: color(srgb-linear 0.01099389 0.0038141198 -0.0409466157); +} + +<===> +================================================================================ +<===> missing/b/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(10% 0.2 none), srgb-linear)} + +<===> missing/b/output.css +a { + b: color(srgb-linear 0.0219904427 -0.0062152626 0.0005755719); +} diff --git a/spec/core_functions/color/to_space/oklab/xyz.hrx b/spec/core_functions/color/to_space/oklab/xyz.hrx new file mode 100644 index 000000000..76968c14e --- /dev/null +++ b/spec/core_functions/color/to_space/oklab/xyz.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(0% 0 0), xyz)} + +<===> black/output.css +a { + b: color(xyz 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(100% 0 0), xyz)} + +<===> white/output.css +a { + b: color(xyz 0.9504559526 1.0000000182 1.0890580001); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(50% 0 0), xyz)} + +<===> gray/output.css +a { + b: color(xyz 0.1188069941 0.1250000023 0.13613225); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(50% 0.2 -0.3), xyz)} + +<===> middle/output.css +a { + b: color(xyz 0.2832157077 0.0847349623 0.9808955517); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(50% -2 2), xyz)} + +<===> out_of_range/near/output.css +a { + b: color(xyz -2.0497647038 0.7157483349 -11.0375527282); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(50% -999999 0), xyz)} + +<===> out_of_range/far/output.css +a { + b: color(xyz -76837326254677680 3783159310641777.5 5396110649242756); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(10% 0.2 0.3 / 0.4), xyz)} + +<===> alpha/partial/output.css +a { + b: color(xyz 0.0096949161 0.0016890376 -0.046376448 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(10% 0.2 0.3 / 0.0), xyz)} + +<===> alpha/transparent/output.css +a { + b: color(xyz 0.0096949161 0.0016890376 -0.046376448 / 0); +} + +<===> +================================================================================ +<===> missing/lightness/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(none 0.2 0.3), xyz)} + +<===> missing/lightness/output.css +a { + b: color(xyz -0.0150397763 0.004582061 -0.1058878063); +} + +<===> +================================================================================ +<===> missing/a/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(10% none 0.3), xyz)} + +<===> missing/a/output.css +a { + b: color(xyz -0.0014924289 0.0021094378 -0.0382539306); +} + +<===> +================================================================================ +<===> missing/b/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(10% 0.2 none), xyz)} + +<===> missing/b/output.css +a { + b: color(xyz 0.0069500554 0.0002726166 0.000231366); +} diff --git a/spec/core_functions/color/to_space/oklab/xyz_d50.hrx b/spec/core_functions/color/to_space/oklab/xyz_d50.hrx new file mode 100644 index 000000000..56386fb04 --- /dev/null +++ b/spec/core_functions/color/to_space/oklab/xyz_d50.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(0% 0 0), xyz-d50)} + +<===> black/output.css +a { + b: color(xyz-d50 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(100% 0 0), xyz-d50)} + +<===> white/output.css +a { + b: color(xyz-d50 0.9642956911 1.0000000145 0.82510479); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(50% 0 0), xyz-d50)} + +<===> gray/output.css +a { + b: color(xyz-d50 0.1205369614 0.1250000018 0.1031380988); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(50% 0.2 -0.3), xyz-d50)} + +<===> middle/output.css +a { + b: color(xyz-d50 0.2495012093 0.0755678711 0.7361680649); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(50% -2 2), xyz-d50)} + +<===> out_of_range/near/output.css +a { + b: color(xyz-d50 -1.5775855307 0.8366247125 -8.2691302395); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(50% -999999 0), xyz-d50)} + +<===> out_of_range/far/output.css +a { + b: color(xyz-d50 -80704154717242816 1378317505528979.2 4824363534483794); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(10% 0.2 0.3 / 0.4), xyz-d50)} + +<===> alpha/partial/output.css +a { + b: color(xyz-d50 0.0125260886 0.0027519422 -0.0349334402 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(10% 0.2 0.3 / 0.0), xyz-d50)} + +<===> alpha/transparent/output.css +a { + b: color(xyz-d50 0.0125260886 0.0027519422 -0.0349334402 / 0); +} + +<===> +================================================================================ +<===> missing/lightness/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(none 0.2 0.3), xyz-d50)} + +<===> missing/lightness/output.css +a { + b: color(xyz-d50 -0.0103407367 0.0059005425 -0.0794063212); +} + +<===> +================================================================================ +<===> missing/a/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(10% none 0.3), xyz-d50)} + +<===> missing/a/output.css +a { + b: color(xyz-d50 0.0004044958 0.0026981824 -0.028716594); +} + +<===> +================================================================================ +<===> missing/b/input.scss +@use 'sass:color'; +a {b: color.to-space(oklab(10% 0.2 none), xyz-d50)} + +<===> missing/b/output.css +a { + b: color(xyz-d50 0.007277813 0.0004719735 0.0001138228); +} diff --git a/spec/core_functions/color/to_space/options.yml b/spec/core_functions/color/to_space/options.yml new file mode 100644 index 000000000..99ecec7ed --- /dev/null +++ b/spec/core_functions/color/to_space/options.yml @@ -0,0 +1,3 @@ +--- +:ignore_for: +- libsass diff --git a/spec/core_functions/color/to_space/prophoto_rgb/a98_rgb.hrx b/spec/core_functions/color/to_space/prophoto_rgb/a98_rgb.hrx new file mode 100644 index 000000000..83119c13f --- /dev/null +++ b/spec/core_functions/color/to_space/prophoto_rgb/a98_rgb.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0 0 0), a98-rgb)} + +<===> black/output.css +a { + b: color(a98-rgb 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 1 1 1), a98-rgb)} + +<===> white/output.css +a { + b: color(a98-rgb 1 1 1); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0.5 0.5 0.5), a98-rgb)} + +<===> gray/output.css +a { + b: color(a98-rgb 0.5670420112 0.5670420112 0.5670420112); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0.2 0.4 0.8), a98-rgb)} + +<===> middle/output.css +a { + b: color(a98-rgb -0.3560951477 0.5045482124 0.8644762739); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb -1 0.4 2), a98-rgb)} + +<===> out_of_range/near/output.css +a { + b: color(a98-rgb -1.4279386159 0.6992982312 1.851989355); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb -999999 0 0), a98-rgb)} + +<===> out_of_range/far/output.css +a { + b: color(a98-rgb -94583.3572201015 41648.2618143793 12982.0175899086); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0.1 0.2 0.3 / 0.4), a98-rgb)} + +<===> alpha/partial/output.css +a { + b: color(a98-rgb -0.1365499745 0.2865616306 0.3841343378 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0.1 0.2 0.3 / 0.0), a98-rgb)} + +<===> alpha/transparent/output.css +a { + b: color(a98-rgb -0.1365499745 0.2865616306 0.3841343378 / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb none 0.2 0.3), a98-rgb)} + +<===> missing/red/output.css +a { + b: color(a98-rgb none 0.2938324337 0.384534187); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0.1 none 0.3), a98-rgb)} + +<===> missing/green/output.css +a { + b: color(a98-rgb -0.0732568776 none 0.3916546985); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0.1 0.2 none), a98-rgb)} + +<===> missing/blue/output.css +a { + b: color(a98-rgb 0.1371997596 0.2872404522 none); +} diff --git a/spec/core_functions/color/to_space/prophoto_rgb/display_p3.hrx b/spec/core_functions/color/to_space/prophoto_rgb/display_p3.hrx new file mode 100644 index 000000000..963621c62 --- /dev/null +++ b/spec/core_functions/color/to_space/prophoto_rgb/display_p3.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0 0 0), display-p3)} + +<===> black/output.css +a { + b: color(display-p3 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 1 1 1), display-p3)} + +<===> white/output.css +a { + b: color(display-p3 1 1 1); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0.5 0.5 0.5), display-p3)} + +<===> gray/output.css +a { + b: color(display-p3 0.5723067532 0.5723067532 0.5723067532); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0.2 0.4 0.8), display-p3)} + +<===> middle/output.css +a { + b: color(display-p3 -0.4263141523 0.4923548598 0.8503908535); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb -1 0.4 2), display-p3)} + +<===> out_of_range/near/output.css +a { + b: color(display-p3 -1.5123725709 0.6119230865 1.7528266609); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb -999999 0 0), display-p3)} + +<===> out_of_range/far/output.css +a { + b: color(display-p3 -40921.237624831 15288.5098255533 -4976.1422545962); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0.1 0.2 0.3 / 0.4), display-p3)} + +<===> alpha/partial/output.css +a { + b: color(display-p3 -0.1681406496 0.272751421 0.3768280764 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0.1 0.2 0.3 / 0.0), display-p3)} + +<===> alpha/transparent/output.css +a { + b: color(display-p3 -0.1681406496 0.272751421 0.3768280764 / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb none 0.2 0.3), display-p3)} + +<===> missing/red/output.css +a { + b: color(display-p3 none 0.278189942 0.3765750961); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0.1 none 0.3), display-p3)} + +<===> missing/green/output.css +a { + b: color(display-p3 -0.0396944837 none 0.3821042494); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0.1 0.2 none), display-p3)} + +<===> missing/blue/output.css +a { + b: color(display-p3 0.0601855627 0.2760901066 none); +} diff --git a/spec/core_functions/color/to_space/prophoto_rgb/hsl.hrx b/spec/core_functions/color/to_space/prophoto_rgb/hsl.hrx new file mode 100644 index 000000000..f01e523ee --- /dev/null +++ b/spec/core_functions/color/to_space/prophoto_rgb/hsl.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0 0 0), hsl)} + +<===> black/output.css +a { + b: hsl(0, 0%, 0%); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 1 1 1), hsl)} + +<===> white/output.css +a { + b: hsl(180, 50%, 100%); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0.5 0.5 0.5), hsl)} + +<===> gray/output.css +a { + b: hsl(0, 0%, 57.2306753164%); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0.2 0.4 0.8), hsl)} + +<===> middle/output.css +a { + b: hsl(195.9034030348, 388.9813639336%, 17.9876851056%); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb -1 0.4 2), hsl)} + +<===> out_of_range/near/output.css +a { + b: hsl(199.2935266227, 2154.1559841675%, 8.1167706475%); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb -999999 0 0), hsl)} + +<===> out_of_range/far/output.css +a { + b: hsl(347.1631207662, 234.6485806965%, -1340219.8783108443%); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0.1 0.2 0.3 / 0.4), hsl)} + +<===> alpha/partial/output.css +a { + b: hsla(190.4112342736, 389.9464516401%, 7.9139613859%, 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0.1 0.2 0.3 / 0.0), hsl)} + +<===> alpha/transparent/output.css +a { + b: hsla(190.4112342736, 389.9464516401%, 7.9139613859%, 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb none 0.2 0.3), hsl)} + +<===> missing/red/output.css +a { + b: hsl(188.6270203536, 825.3071653223%, 4.1925835467%); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0.1 none 0.3), hsl)} + +<===> missing/green/output.css +a { + b: hsl(241.7396943935, 128.7470611392%, 17.4883701258%); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0.1 0.2 none), hsl)} + +<===> missing/blue/output.css +a { + b: hsl(119.2084673976, 194.643672602%, 9.5495891256%); +} diff --git a/spec/core_functions/color/to_space/prophoto_rgb/hwb.hrx b/spec/core_functions/color/to_space/prophoto_rgb/hwb.hrx new file mode 100644 index 000000000..1192159ec --- /dev/null +++ b/spec/core_functions/color/to_space/prophoto_rgb/hwb.hrx @@ -0,0 +1,149 @@ +<===> black/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(color(prophoto-rgb 0 0 0), hwb)); + +<===> black/output.css +a { + value: black; + space: hwb; + channels: 0deg 0% 100% / 1; +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(color(prophoto-rgb 1 1 1), hwb)); + +<===> white/output.css +a { + value: white; + space: hwb; + channels: 0deg 100% 0% / 1; +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(color(prophoto-rgb 0.5 0.5 0.5), hwb)); + +<===> gray/output.css +a { + value: hsl(0, 0%, 57.2306753164%); + space: hwb; + channels: 0deg 57.2306753164% 42.7693246836% / 1; +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(color(prophoto-rgb 0.2 0.4 0.8), hwb)); + +<===> middle/output.css +a { + value: hsl(195.9034030348, 388.9813639336%, 17.9876851056%); + space: hwb; + channels: 195.9034030348deg -51.9810577583% 12.0435720304% / 1; +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(color(prophoto-rgb -1 0.4 2), hwb)); + +<===> out_of_range/near/output.css +a { + value: hsl(199.2935266227, 2154.1559841675%, 8.1167706475%); + space: hwb; + channels: 199.2935266227deg -166.731129976% -82.9646712709% / 1; +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(color(prophoto-rgb -999999 0 0), hwb)); + +<===> out_of_range/far/output.css +a { + value: hsl(347.1631207662, 234.6485806965%, -1340219.878310844%); + space: hwb; + channels: 167.1631207662deg -4485026.800979206% -1804487.0443575173% / 1; +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(color(prophoto-rgb 0.1 0.2 0.3 / 0.4), hwb)); + +<===> alpha/partial/output.css +a { + value: hsla(190.4112342736, 389.9464516401%, 7.9139613859%, 0.4); + space: hwb; + channels: 190.4112342736deg -22.9462502225% 61.2258270058% / 0.4; +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(color(prophoto-rgb 0.1 0.2 0.3 / 0.0), hwb)); + +<===> alpha/transparent/output.css +a { + value: hsla(190.4112342736, 389.9464516401%, 7.9139613859%, 0); + space: hwb; + channels: 190.4112342736deg -22.9462502225% 61.2258270058% / 0; +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(color(prophoto-rgb none 0.2 0.3), hwb)); + +<===> missing/red/output.css +a { + value: hsl(188.6270203536, 825.3071653223%, 4.1925835467%); + space: hwb; + channels: 188.6270203536deg -30.409108876% 61.2057240306% / 1; +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(color(prophoto-rgb 0.1 none 0.3), hwb)); + +<===> missing/green/output.css +a { + value: hsl(241.7396943935, 128.7470611392%, 17.4883701258%); + space: hwb; + channels: 241.7396943935deg -5.0273924523% 59.9958672962% / 1; +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +a {b: color.to-space(color(prophoto-rgb 0.1 0.2 none), hwb)} + +<===> missing/blue/output.css +a { + b: hsl(119.2084673976, 194.643672602%, 9.5495891256%); +} diff --git a/spec/core_functions/color/to_space/prophoto_rgb/lab.hrx b/spec/core_functions/color/to_space/prophoto_rgb/lab.hrx new file mode 100644 index 000000000..d78de9c6d --- /dev/null +++ b/spec/core_functions/color/to_space/prophoto_rgb/lab.hrx @@ -0,0 +1,119 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0 0 0), lab)} + +<===> black/output.css +a { + b: lab(0% 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 1 1 1), lab)} + +<===> white/output.css +a { + b: lab(100% 0 0); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0.5 0.5 0.5), lab)} + +<===> gray/output.css +a { + b: lab(60.5314588248% 0 0); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0.2 0.4 0.8), lab)} + +<===> middle/output.css +a { + b: lab(46.0098211673% -39.6566664112 -68.0244470598); +} + +<===> +================================================================================ +<===> out_of_range/options.yml +:todo: + - dart-sass # w3c/csswg-drafts#9484 + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb -1 0.4 2), lab)} + +<===> out_of_range/near/output.css +a { + b: lab(30.0623308533% 38.5823326773 -241.4998540297); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb -999999 0 0), lab)} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0.1 0.2 0.3 / 0.4), lab)} + +<===> alpha/partial/output.css +a { + b: lab(24.9090529931% -30.9723221547 -26.5858249779 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0.1 0.2 0.3 / 0.0), lab)} + +<===> alpha/transparent/output.css +a { + b: lab(24.9090529931% -30.9723221547 -26.5858249779 / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb none 0.2 0.3), lab)} + +<===> missing/red/output.css +a { + b: lab(23.4372923288% -57.2633255164 -29.1233433646); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0.1 none 0.3), lab)} + +<===> missing/green/output.css +a { + b: lab(4.1334625643% 41.362651194 -62.4058084759); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0.1 0.2 none), lab)} + +<===> missing/blue/output.css +a { + b: lab(24.9058511193% -38.7042406064 42.9411226195); +} diff --git a/spec/core_functions/color/to_space/prophoto_rgb/lch.hrx b/spec/core_functions/color/to_space/prophoto_rgb/lch.hrx new file mode 100644 index 000000000..481afd35d --- /dev/null +++ b/spec/core_functions/color/to_space/prophoto_rgb/lch.hrx @@ -0,0 +1,119 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0 0 0), lch)} + +<===> black/output.css +a { + b: lch(0% 0 none); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 1 1 1), lch)} + +<===> white/output.css +a { + b: lch(100% 0 none); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0.5 0.5 0.5), lch)} + +<===> gray/output.css +a { + b: lch(60.5314588248% 0 none); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0.2 0.4 0.8), lch)} + +<===> middle/output.css +a { + b: lch(46.0098211673% 78.7399300777 239.7588117754deg); +} + +<===> +================================================================================ +<===> out_of_range/options.yml +:todo: + - dart-sass # # w3c/csswg-drafts#9484 + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb -1 0.4 2), lch)} + +<===> out_of_range/near/output.css +a { + b: lch(30.0623308533% 244.5624171683 279.0769417748deg); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb -999999 0 0), lch)} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0.1 0.2 0.3 / 0.4), lch)} + +<===> alpha/partial/output.css +a { + b: lch(24.9090529931% 40.8177758998 220.6419219413deg / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0.1 0.2 0.3 / 0.0), lch)} + +<===> alpha/transparent/output.css +a { + b: lch(24.9090529931% 40.8177758998 220.6419219413deg / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb none 0.2 0.3), lch)} + +<===> missing/red/output.css +a { + b: lch(23.4372923288% 64.2437357096 206.9572653738deg); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0.1 none 0.3), lch)} + +<===> missing/green/output.css +a { + b: lch(4.1334625643% 74.8689110735 303.5364691761deg); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0.1 0.2 none), lch)} + +<===> missing/blue/output.css +a { + b: lch(24.9058511193% 57.8096726572 132.0293732633deg); +} diff --git a/spec/core_functions/color/to_space/prophoto_rgb/oklab.hrx b/spec/core_functions/color/to_space/prophoto_rgb/oklab.hrx new file mode 100644 index 000000000..d9fabded2 --- /dev/null +++ b/spec/core_functions/color/to_space/prophoto_rgb/oklab.hrx @@ -0,0 +1,117 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0 0 0), oklab)} + +<===> black/output.css +a { + b: oklab(0% 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 1 1 1), oklab)} + +<===> white/output.css +a { + b: oklab(99.9999993474% 0.0000000001 0.0000000373); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0.5 0.5 0.5), oklab)} + +<===> gray/output.css +a { + b: oklab(65.9753951081% 0.0000000001 0.0000000246); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0.2 0.4 0.8), oklab)} + +<===> middle/output.css +a { + b: oklab(52.9739863521% -0.23472674 -0.1933931965); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb -1 0.4 2), oklab)} + +<===> out_of_range/near/output.css +a { + b: oklab(9.4597839538% -2.2223701334 -0.8062107579); +} + +<===> +================================================================================ +<===> out_of_range/far/options.yml +:todo: + - dart-sass # w3c/csswg-drafts#9484 + +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb -999999 0 0), oklab)} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0.1 0.2 0.3 / 0.4), oklab)} + +<===> alpha/partial/output.css +a { + b: oklab(34.6066204299% -0.1151566731 -0.0744029999 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0.1 0.2 0.3 / 0.0), oklab)} + +<===> alpha/transparent/output.css +a { + b: oklab(34.6066204299% -0.1151566731 -0.0744029999 / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb none 0.2 0.3), oklab)} + +<===> missing/red/output.css +a { + b: oklab(32.493750959% -0.2028589632 -0.0824787667); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0.1 none 0.3), oklab)} + +<===> missing/green/output.css +a { + b: oklab(20.6577507967% -0.042480718 -0.1739784043); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0.1 0.2 none), oklab)} + +<===> missing/blue/output.css +a { + b: oklab(33.9153744238% -0.1155256021 0.0932618247); +} diff --git a/spec/core_functions/color/to_space/prophoto_rgb/oklch.hrx b/spec/core_functions/color/to_space/prophoto_rgb/oklch.hrx new file mode 100644 index 000000000..da780f59d --- /dev/null +++ b/spec/core_functions/color/to_space/prophoto_rgb/oklch.hrx @@ -0,0 +1,117 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0 0 0), oklch)} + +<===> black/output.css +a { + b: oklch(0% 0 none); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 1 1 1), oklch)} + +<===> white/output.css +a { + b: oklch(99.9999993474% 0.0000000373 89.8755630959deg); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0.5 0.5 0.5), oklch)} + +<===> gray/output.css +a { + b: oklch(65.9753951081% 0.0000000246 89.875562502deg); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0.2 0.4 0.8), oklch)} + +<===> middle/output.css +a { + b: oklch(52.9739863521% 0.3041341331 219.4853767353deg); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb -1 0.4 2), oklch)} + +<===> out_of_range/near/output.css +a { + b: oklch(9.4597839538% 2.3640864612 199.9392877927deg); +} + +<===> +================================================================================ +<===> out_of_range/far/options.yml +:todo: + - dart-sass # w3c/csswg-drafts#9484 + +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb -999999 0 0), oklch)} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0.1 0.2 0.3 / 0.4), oklch)} + +<===> alpha/partial/output.css +a { + b: oklch(34.6066204299% 0.1371016621 212.8665983723deg / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0.1 0.2 0.3 / 0.0), oklch)} + +<===> alpha/transparent/output.css +a { + b: oklch(34.6066204299% 0.1371016621 212.8665983723deg / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb none 0.2 0.3), oklch)} + +<===> missing/red/output.css +a { + b: oklch(32.493750959% 0.2189851728 202.1257651897deg); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0.1 none 0.3), oklch)} + +<===> missing/green/output.css +a { + b: oklch(20.6577507967% 0.1790896327 256.2784427934deg); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0.1 0.2 none), oklch)} + +<===> missing/blue/output.css +a { + b: oklch(33.9153744238% 0.1484719929 141.0866609821deg); +} diff --git a/spec/core_functions/color/to_space/prophoto_rgb/prophoto_rgb.hrx b/spec/core_functions/color/to_space/prophoto_rgb/prophoto_rgb.hrx new file mode 100644 index 000000000..c4c9c1e34 --- /dev/null +++ b/spec/core_functions/color/to_space/prophoto_rgb/prophoto_rgb.hrx @@ -0,0 +1,52 @@ +<===> in_range/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0.2 0.4 0.8), prophoto-rgb)} + +<===> in_range/output.css +a { + b: color(prophoto-rgb 0.2 0.4 0.8); +} + +<===> +================================================================================ +<===> out_of_range/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb -1 0.4 2), prophoto-rgb)} + +<===> out_of_range/output.css +a { + b: color(prophoto-rgb -1 0.4 2); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb none 0.2 0.3), prophoto-rgb)} + +<===> missing/red/output.css +a { + b: color(prophoto-rgb none 0.2 0.3); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0.1 none 0.3), prophoto-rgb)} + +<===> missing/green/output.css +a { + b: color(prophoto-rgb 0.1 none 0.3); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0.1 0.2 none), prophoto-rgb)} + +<===> missing/blue/output.css +a { + b: color(prophoto-rgb 0.1 0.2 none); +} diff --git a/spec/core_functions/color/to_space/prophoto_rgb/rec2020.hrx b/spec/core_functions/color/to_space/prophoto_rgb/rec2020.hrx new file mode 100644 index 000000000..3a172f985 --- /dev/null +++ b/spec/core_functions/color/to_space/prophoto_rgb/rec2020.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0 0 0), rec2020)} + +<===> black/output.css +a { + b: color(rec2020 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 1 1 1), rec2020)} + +<===> white/output.css +a { + b: color(rec2020 1 1 1); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0.5 0.5 0.5), rec2020)} + +<===> gray/output.css +a { + b: color(rec2020 0.5277221397 0.5277221397 0.5277221397); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0.2 0.4 0.8), rec2020)} + +<===> middle/output.css +a { + b: color(rec2020 -0.1605692199 0.4295080587 0.8280670897); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb -1 0.4 2), rec2020)} + +<===> out_of_range/near/output.css +a { + b: color(rec2020 -1.3001703326 0.4795529651 1.8550030977); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb -999999 0 0), rec2020)} + +<===> out_of_range/far/output.css +a { + b: color(rec2020 -86467.5261196395 24057.1232097426 -7686.7078341848); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0.1 0.2 0.3 / 0.4), rec2020)} + +<===> alpha/partial/output.css +a { + b: color(rec2020 -0.0023957954 0.2043088925 0.318295884 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0.1 0.2 0.3 / 0.0), rec2020)} + +<===> alpha/transparent/output.css +a { + b: color(rec2020 -0.0023957954 0.2043088925 0.318295884 / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb none 0.2 0.3), rec2020)} + +<===> missing/red/output.css +a { + b: color(rec2020 none 0.2069376666 0.3181540374); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0.1 none 0.3), rec2020)} + +<===> missing/green/output.css +a { + b: color(rec2020 0.0119013078 none 0.3219111049); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0.1 0.2 none), rec2020)} + +<===> missing/blue/output.css +a { + b: color(rec2020 0.0713341527 0.2072064033 none); +} diff --git a/spec/core_functions/color/to_space/prophoto_rgb/rgb.hrx b/spec/core_functions/color/to_space/prophoto_rgb/rgb.hrx new file mode 100644 index 000000000..b6788c717 --- /dev/null +++ b/spec/core_functions/color/to_space/prophoto_rgb/rgb.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0 0 0), rgb)} + +<===> black/output.css +a { + b: black; +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 1 1 1), rgb)} + +<===> white/output.css +a { + b: white; +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0.5 0.5 0.5), rgb)} + +<===> gray/output.css +a { + b: rgb(145.9382220568, 145.9382220568, 145.9382220568); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0.2 0.4 0.8), rgb)} + +<===> middle/output.css +a { + b: hsl(195.9034030348, 388.9813639336%, 17.9876851056%); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb -1 0.4 2), rgb)} + +<===> out_of_range/near/output.css +a { + b: hsl(199.2935266227, 2154.1559841675%, 8.1167706475%); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb -999999 0 0), rgb)} + +<===> out_of_range/far/output.css +a { + b: hsl(347.1631207662, 234.6485806965%, -1340219.8783108443%); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0.1 0.2 0.3 / 0.4), rgb)} + +<===> alpha/partial/output.css +a { + b: hsla(190.4112342736, 389.9464516401%, 7.9139613859%, 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0.1 0.2 0.3 / 0.0), rgb)} + +<===> alpha/transparent/output.css +a { + b: hsla(190.4112342736, 389.9464516401%, 7.9139613859%, 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb none 0.2 0.3), rgb)} + +<===> missing/red/output.css +a { + b: rgb(0, 73.552095814, 98.9254037219); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0.1 none 0.3), rgb)} + +<===> missing/green/output.css +a { + b: hsl(234.8931237502, 120.5152085415%, 18.1412125578%); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0.1 0.2 none), rgb)} + +<===> missing/blue/output.css +a { + b: hsl(133.9801165671, 187.2672802248%, 9.7948015855%); +} diff --git a/spec/core_functions/color/to_space/prophoto_rgb/srgb.hrx b/spec/core_functions/color/to_space/prophoto_rgb/srgb.hrx new file mode 100644 index 000000000..c2f0ea5fb --- /dev/null +++ b/spec/core_functions/color/to_space/prophoto_rgb/srgb.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0 0 0), srgb)} + +<===> black/output.css +a { + b: color(srgb 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 1 1 1), srgb)} + +<===> white/output.css +a { + b: color(srgb 1 1 1); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0.5 0.5 0.5), srgb)} + +<===> gray/output.css +a { + b: color(srgb 0.5723067532 0.5723067532 0.5723067532); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0.2 0.4 0.8), srgb)} + +<===> middle/output.css +a { + b: color(srgb -0.5198105776 0.5086505738 0.8795642797); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb -1 0.4 2), srgb)} + +<===> out_of_range/near/output.css +a { + b: color(srgb -1.6673112998 0.7051691708 1.8296467127); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb -999999 0 0), srgb)} + +<===> out_of_range/far/output.css +a { + b: color(srgb -44850.2680097921 18045.8704435752 4589.3682169335); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0.1 0.2 0.3 / 0.4), srgb)} + +<===> alpha/partial/output.css +a { + b: color(srgb -0.2294625022 0.280644099 0.3877417299 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0.1 0.2 0.3 / 0.0), srgb)} + +<===> alpha/transparent/output.css +a { + b: color(srgb -0.2294625022 0.280644099 0.3877417299 / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb none 0.2 0.3), srgb)} + +<===> missing/red/output.css +a { + b: color(srgb none 0.2884395914 0.3879427597); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0.1 none 0.3), srgb)} + +<===> missing/green/output.css +a { + b: color(srgb -0.0372170759 none 0.400041327); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0.1 0.2 none), srgb)} + +<===> missing/blue/output.css +a { + b: color(srgb -0.0854765695 0.2813726012 none); +} diff --git a/spec/core_functions/color/to_space/prophoto_rgb/srgb_linear.hrx b/spec/core_functions/color/to_space/prophoto_rgb/srgb_linear.hrx new file mode 100644 index 000000000..887db0215 --- /dev/null +++ b/spec/core_functions/color/to_space/prophoto_rgb/srgb_linear.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0 0 0), srgb-linear)} + +<===> black/output.css +a { + b: color(srgb-linear 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 1 1 1), srgb-linear)} + +<===> white/output.css +a { + b: color(srgb-linear 1 1 1); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0.5 0.5 0.5), srgb-linear)} + +<===> gray/output.css +a { + b: color(srgb-linear 0.2871745887 0.2871745887 0.2871745887); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0.2 0.4 0.8), srgb-linear)} + +<===> middle/output.css +a { + b: color(srgb-linear -0.232837807 0.2221355079 0.7475773304); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb -1 0.4 2), srgb-linear)} + +<===> out_of_range/near/output.css +a { + b: color(srgb-linear -3.2423661674 0.4553849808 4.0248155294); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb -999999 0 0), srgb-linear)} + +<===> out_of_range/far/output.css +a { + b: color(srgb-linear -128360522797.99591 14437901609.733408 540024616.0904481); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0.1 0.2 0.3 / 0.4), srgb-linear)} + +<===> alpha/partial/output.css +a { + b: color(srgb-linear -0.0430382059 0.0640182408 0.1244386226 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0.1 0.2 0.3 / 0.0), srgb-linear)} + +<===> alpha/transparent/output.css +a { + b: color(srgb-linear -0.0430382059 0.0640182408 0.1244386226 / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb none 0.2 0.3), srgb-linear)} + +<===> missing/red/output.css +a { + b: color(srgb-linear none 0.0676448843 0.1245742709); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0.1 none 0.3), srgb-linear)} + +<===> missing/green/output.css +a { + b: color(srgb-linear -0.0028805786 none 0.1328972872); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0.1 0.2 none), srgb-linear)} + +<===> missing/blue/output.css +a { + b: color(srgb-linear -0.0079148637 0.0643522253 none); +} diff --git a/spec/core_functions/color/to_space/prophoto_rgb/xyz.hrx b/spec/core_functions/color/to_space/prophoto_rgb/xyz.hrx new file mode 100644 index 000000000..fb6e0d966 --- /dev/null +++ b/spec/core_functions/color/to_space/prophoto_rgb/xyz.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0 0 0), xyz)} + +<===> black/output.css +a { + b: color(xyz 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 1 1 1), xyz)} + +<===> white/output.css +a { + b: color(xyz 0.9504559271 1 1.0890577508); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0.5 0.5 0.5), xyz)} + +<===> gray/output.css +a { + b: color(xyz 0.27294679 0.2871745887 0.3127497117); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0.2 0.4 0.8), xyz)} + +<===> middle/output.css +a { + b: color(xyz 0.1183353555 0.1633232963 0.7325727364); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb -1 0.4 2), xyz)} + +<===> out_of_range/near/output.css +a { + b: color(xyz -0.4478815578 -0.0732156915 3.8173184875); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb -999999 0 0), xyz)} + +<===> out_of_range/far/output.css +a { + b: color(xyz -47674467013.18759 -16929933315.113932 -247080732.7777534); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0.1 0.2 0.3 / 0.4), xyz)} + +<===> alpha/partial/output.css +a { + b: color(xyz 0.0276021409 0.0456157517 0.1250815881 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0.1 0.2 0.3 / 0.0), xyz)} + +<===> alpha/transparent/output.css +a { + b: color(xyz 0.0276021409 0.0456157517 0.1250815881 / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb none 0.2 0.3), xyz)} + +<===> missing/red/output.css +a { + b: color(xyz none 0.041363137 0.1250195241); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0.1 none 0.3), xyz)} + +<===> missing/green/output.css +a { + b: color(xyz 0.0213812245 none 0.1257953743); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0.1 0.2 none), xyz)} + +<===> missing/blue/output.css +a { + b: color(xyz 0.0181962227 0.0437192439 none); +} diff --git a/spec/core_functions/color/to_space/prophoto_rgb/xyz_d50.hrx b/spec/core_functions/color/to_space/prophoto_rgb/xyz_d50.hrx new file mode 100644 index 000000000..f8ce37c84 --- /dev/null +++ b/spec/core_functions/color/to_space/prophoto_rgb/xyz_d50.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0 0 0), xyz-d50)} + +<===> black/output.css +a { + b: color(xyz-d50 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 1 1 1), xyz-d50)} + +<===> white/output.css +a { + b: color(xyz-d50 0.9642956764 1 0.8251046025); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0.5 0.5 0.5), xyz-d50)} + +<===> gray/output.css +a { + b: color(xyz-d50 0.2769212143 0.2871745887 0.2369490749); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0.2 0.4 0.8), xyz-d50)} + +<===> middle/output.css +a { + b: color(xyz-d50 0.0909854172 0.1527592329 0.5521676847); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb -1 0.4 2), xyz-d50)} + +<===> out_of_range/near/output.css +a { + b: color(xyz-d50 -0.662628365 -0.1509612194 2.873181106); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb -999999 0 0), xyz-d50)} + +<===> out_of_range/far/output.css +a { + b: color(xyz-d50 -50335581773.96425 -18176260183.033443 0); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0.1 0.2 0.3 / 0.4), xyz-d50)} + +<===> alpha/partial/output.css +a { + b: color(xyz-d50 0.0236937162 0.0438615839 0.0944772554 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0.1 0.2 0.3 / 0.0), xyz-d50)} + +<===> alpha/transparent/output.css +a { + b: color(xyz-d50 0.0236937162 0.0438615839 0.0944772554 / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb none 0.2 0.3), xyz-d50)} + +<===> missing/red/output.css +a { + b: color(xyz-d50 none 0.0392959056 0.0944772554); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0.1 none 0.3), xyz-d50)} + +<===> missing/green/output.css +a { + b: color(xyz-d50 0.0162331704 none 0.0944772554); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(prophoto-rgb 0.1 0.2 none), xyz-d50)} + +<===> missing/blue/output.css +a { + b: color(xyz-d50 0.0201042951 0.0438512858 none); +} diff --git a/spec/core_functions/color/to_space/rec2020/a98_rgb.hrx b/spec/core_functions/color/to_space/rec2020/a98_rgb.hrx new file mode 100644 index 000000000..d7743ad10 --- /dev/null +++ b/spec/core_functions/color/to_space/rec2020/a98_rgb.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0 0 0), a98-rgb)} + +<===> black/output.css +a { + b: color(a98-rgb 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 1 1 1), a98-rgb)} + +<===> white/output.css +a { + b: color(a98-rgb 1 1 1); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0.5 0.5 0.5), a98-rgb)} + +<===> gray/output.css +a { + b: color(a98-rgb 0.5417153213 0.5417153213 0.5417153213); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0.2 0.4 0.8), a98-rgb)} + +<===> middle/output.css +a { + b: color(a98-rgb 0.13489511 0.4629710676 0.8371559205); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 -1 0.4 2), a98-rgb)} + +<===> out_of_range/near/output.css +a { + b: color(a98-rgb -1.1646526275 0.5655440386 1.9874528803); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 -999999 0 0), a98-rgb)} + +<===> out_of_range/far/output.css +a { + b: color(a98-rgb -1119831.7269648165 407249.8039869511 187156.9941916847); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0.1 0.2 0.3 / 0.4), a98-rgb)} + +<===> alpha/partial/output.css +a { + b: color(a98-rgb 0.1470288666 0.2765731567 0.3660737554 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0.1 0.2 0.3 / 0.0), a98-rgb)} + +<===> alpha/transparent/output.css +a { + b: color(a98-rgb 0.1470288666 0.2765731567 0.3660737554 / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 none 0.2 0.3), a98-rgb)} + +<===> missing/red/output.css +a { + b: color(a98-rgb none 0.2824471442 0.3668416445); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0.1 none 0.3), a98-rgb)} + +<===> missing/green/output.css +a { + b: color(a98-rgb 0.1694794184 none 0.3702410451); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0.1 0.2 none), a98-rgb)} + +<===> missing/blue/output.css +a { + b: color(a98-rgb 0.1707192347 0.278433765 none); +} diff --git a/spec/core_functions/color/to_space/rec2020/display_p3.hrx b/spec/core_functions/color/to_space/rec2020/display_p3.hrx new file mode 100644 index 000000000..3321e3fec --- /dev/null +++ b/spec/core_functions/color/to_space/rec2020/display_p3.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0 0 0), display-p3)} + +<===> black/output.css +a { + b: color(display-p3 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 1 1 1), display-p3)} + +<===> white/output.css +a { + b: color(display-p3 1 1 1); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0.5 0.5 0.5), display-p3)} + +<===> gray/output.css +a { + b: color(display-p3 0.5465835909 0.5465835909 0.5465835909); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0.2 0.4 0.8), display-p3)} + +<===> middle/output.css +a { + b: color(display-p3 -0.1207745932 0.4564097151 0.8252565585); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 -1 0.4 2), display-p3)} + +<===> out_of_range/near/output.css +a { + b: color(display-p3 -1.2450966031 0.4927082146 1.877624028); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 -999999 0 0), display-p3)} + +<===> out_of_range/far/output.css +a { + b: color(display-p3 -392808.6781006625 111415.2873247036 -30092.3347141782); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0.1 0.2 0.3 / 0.4), display-p3)} + +<===> alpha/partial/output.css +a { + b: color(display-p3 0.0867047731 0.2651407977 0.3592704962 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0.1 0.2 0.3 / 0.0), display-p3)} + +<===> alpha/transparent/output.css +a { + b: color(display-p3 0.0867047731 0.2651407977 0.3592704962 / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 none 0.2 0.3), display-p3)} + +<===> missing/red/output.css +a { + b: color(display-p3 none 0.2685429813 0.3591672285); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0.1 none 0.3), display-p3)} + +<===> missing/green/output.css +a { + b: color(display-p3 0.1670371089 none 0.3610354836); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0.1 0.2 none), display-p3)} + +<===> missing/blue/output.css +a { + b: color(display-p3 0.1260425103 0.2677058987 none); +} diff --git a/spec/core_functions/color/to_space/rec2020/hsl.hrx b/spec/core_functions/color/to_space/rec2020/hsl.hrx new file mode 100644 index 000000000..b8b59b7e1 --- /dev/null +++ b/spec/core_functions/color/to_space/rec2020/hsl.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0 0 0), hsl)} + +<===> black/output.css +a { + b: hsl(0, 0%, 0%); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 1 1 1), hsl)} + +<===> white/output.css +a { + b: hsl(0, 0%, 100%); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0.5 0.5 0.5), hsl)} + +<===> gray/output.css +a { + b: hsl(0, 0%, 54.6583590878%); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0.2 0.4 0.8), hsl)} + +<===> middle/output.css +a { + b: hsl(200.8128966593, 189.0732219315%, 29.5081773497%); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 -1 0.4 2), hsl)} + +<===> out_of_range/near/output.css +a { + b: hsl(204.9795970204, 570.1567645938%, 29.20918492%); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 -999999 0 0), hsl)} + +<===> out_of_range/far/output.css +a { + b: hsl(351.6022221471, 202.9643125658%, -14161586.907056699%); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0.1 0.2 0.3 / 0.4), hsl)} + +<===> alpha/partial/output.css +a { + b: hsla(194.5479244469, 123.11735267%, 16.5168092719%, 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0.1 0.2 0.3 / 0.0), hsl)} + +<===> alpha/transparent/output.css +a { + b: hsla(194.5479244469, 123.11735267%, 16.5168092719%, 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 none 0.2 0.3), hsl)} + +<===> missing/red/output.css +a { + b: hsl(189.4362583411, 400.9276505087%, 7.3695655834%); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0.1 none 0.3), hsl)} + +<===> missing/green/output.css +a { + b: hsl(273.3326815842, 128.5408000864%, 16.5048029077%); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0.1 0.2 none), hsl)} + +<===> missing/blue/output.css +a { + b: hsl(97.48398538, 169.4637013095%, 10.0907863158%); +} diff --git a/spec/core_functions/color/to_space/rec2020/hwb.hrx b/spec/core_functions/color/to_space/rec2020/hwb.hrx new file mode 100644 index 000000000..54449401d --- /dev/null +++ b/spec/core_functions/color/to_space/rec2020/hwb.hrx @@ -0,0 +1,149 @@ +<===> black/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(color(rec2020 0 0 0), hwb)); + +<===> black/output.css +a { + value: black; + space: hwb; + channels: 0deg 0% 100% / 1; +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(color(rec2020 1 1 1), hwb)); + +<===> white/output.css +a { + value: white; + space: hwb; + channels: 0deg 100% 0% / 1; +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(color(rec2020 0.5 0.5 0.5), hwb)); + +<===> gray/output.css +a { + value: hsl(0, 0%, 54.6583590878%); + space: hwb; + channels: 0deg 54.6583590878% 45.3416409122% / 1; +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(color(rec2020 0.2 0.4 0.8), hwb)); + +<===> middle/output.css +a { + value: hsl(200.8128966593, 189.0732219315%, 29.5081773497%); + space: hwb; + channels: 200.8128966593deg -26.2838842987% 14.6997610019% / 1; +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(color(rec2020 -1 0.4 2), hwb)); + +<===> out_of_range/near/output.css +a { + value: hsl(204.9795970204, 570.1567645938%, 29.20918492%); + space: hwb; + channels: 204.9795970204deg -137.3289587842% -95.7473286243% / 1; +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(color(rec2020 -999999 0 0), hwb)); + +<===> out_of_range/far/output.css +a { + value: hsl(351.6022221471, 202.9643125658%, -14161586.907056702%); + space: hwb; + channels: 171.6022221471deg -42904554.421379425% -14581280.607266026% / 1; +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(color(rec2020 0.1 0.2 0.3 / 0.4), hwb)); + +<===> alpha/partial/output.css +a { + value: hsla(194.5479244469, 123.11735267%, 16.5168092719%, 0.4); + space: hwb; + channels: 194.5479244469deg -3.8182490492% 63.148132407% / 0.4; +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(color(rec2020 0.1 0.2 0.3 / 0.0), hwb)); + +<===> alpha/transparent/output.css +a { + value: hsla(194.5479244469, 123.11735267%, 16.5168092719%, 0); + space: hwb; + channels: 194.5479244469deg -3.8182490492% 63.148132407% / 0; +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(color(rec2020 none 0.2 0.3), hwb)); + +<===> missing/red/output.css +a { + value: hsl(189.4362583411, 400.9276505087%, 7.3695655834%); + space: hwb; + channels: 189.4362583411deg -22.1770605629% 63.0838082703% / 1; +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(color(rec2020 0.1 none 0.3), hwb)); + +<===> missing/green/output.css +a { + value: hsl(273.3326815842, 128.5408000864%, 16.5048029077%); + space: hwb; + channels: 273.3326815842deg -4.7106028025% 62.2797913821% / 1; +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +a {b: color.to-space(color(rec2020 0.1 0.2 none), hwb)} + +<===> missing/blue/output.css +a { + b: hsl(97.48398538, 169.4637013095%, 10.0907863158%); +} diff --git a/spec/core_functions/color/to_space/rec2020/lab.hrx b/spec/core_functions/color/to_space/rec2020/lab.hrx new file mode 100644 index 000000000..a0deb83d9 --- /dev/null +++ b/spec/core_functions/color/to_space/rec2020/lab.hrx @@ -0,0 +1,117 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0 0 0), lab)} + +<===> black/output.css +a { + b: lab(0% 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 1 1 1), lab)} + +<===> white/output.css +a { + b: lab(100% 0 0); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0.5 0.5 0.5), lab)} + +<===> gray/output.css +a { + b: lab(58.0104094495% 0 0); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0.2 0.4 0.8), lab)} + +<===> middle/output.css +a { + b: lab(47.1831278283% -5.7697476711 -62.0090026934); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 -1 0.4 2), lab)} + +<===> out_of_range/near/output.css +a { + b: lab(20.0233737121% -563.3455911654 -257.3742149404); +} + +<===> +================================================================================ +<===> out_of_range/far/options.yml +:todo: + - dart-sass # w3c/csswg-drafts#9484 + +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 -999999 0 0), lab)} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0.1 0.2 0.3 / 0.4), lab)} + +<===> alpha/partial/output.css +a { + b: lab(26.3242106967% -12.9991476228 -20.999464924 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0.1 0.2 0.3 / 0.0), lab)} + +<===> alpha/transparent/output.css +a { + b: lab(26.3242106967% -12.9991476228 -20.999464924 / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 none 0.2 0.3), lab)} + +<===> missing/red/output.css +a { + b: lab(24.4167376804% -31.5965927959 -24.304113724); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0.1 none 0.3), lab)} + +<===> missing/green/output.css +a { + b: lab(9.8621057796% 42.7961734552 -48.7693303375); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0.1 0.2 none), lab)} + +<===> missing/blue/output.css +a { + b: lab(24.8794631126% -29.5241312368 39.836355697); +} diff --git a/spec/core_functions/color/to_space/rec2020/lch.hrx b/spec/core_functions/color/to_space/rec2020/lch.hrx new file mode 100644 index 000000000..a7a357040 --- /dev/null +++ b/spec/core_functions/color/to_space/rec2020/lch.hrx @@ -0,0 +1,117 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0 0 0), lch)} + +<===> black/output.css +a { + b: lch(0% 0 none); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 1 1 1), lch)} + +<===> white/output.css +a { + b: lch(100% 0 none); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0.5 0.5 0.5), lch)} + +<===> gray/output.css +a { + b: lch(58.0104094495% 0 none); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0.2 0.4 0.8), lch)} + +<===> middle/output.css +a { + b: lch(47.1831278283% 62.2768528686 264.6841092292deg); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 -1 0.4 2), lch)} + +<===> out_of_range/near/output.css +a { + b: lch(20.0233737121% 619.3542940851 204.5541138043deg); +} + +<===> +================================================================================ +<===> out_of_range/far/options.yml +:todo: + - dart-sass # w3c/csswg-drafts#9484 + +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 -999999 0 0), lch)} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0.1 0.2 0.3 / 0.4), lch)} + +<===> alpha/partial/output.css +a { + b: lch(26.3242106967% 24.6972744653 238.2415478893deg / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0.1 0.2 0.3 / 0.0), lch)} + +<===> alpha/transparent/output.css +a { + b: lch(26.3242106967% 24.6972744653 238.2415478893deg / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 none 0.2 0.3), lch)} + +<===> missing/red/output.css +a { + b: lch(24.4167376804% 39.8626971017 217.5675010071deg); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0.1 none 0.3), lch)} + +<===> missing/green/output.css +a { + b: lch(9.8621057796% 64.8842048882 311.267672367deg); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0.1 0.2 none), lch)} + +<===> missing/blue/output.css +a { + b: lch(24.8794631126% 49.5843681064 126.5434514525deg); +} diff --git a/spec/core_functions/color/to_space/rec2020/oklab.hrx b/spec/core_functions/color/to_space/rec2020/oklab.hrx new file mode 100644 index 000000000..583e646b8 --- /dev/null +++ b/spec/core_functions/color/to_space/rec2020/oklab.hrx @@ -0,0 +1,117 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0 0 0), oklab)} + +<===> black/output.css +a { + b: oklab(0% 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 1 1 1), oklab)} + +<===> white/output.css +a { + b: oklab(99.9999993474% 0.0000000001 0.0000000373); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0.5 0.5 0.5), oklab)} + +<===> gray/output.css +a { + b: oklab(63.8020766953% 0.0000000001 0.0000000238); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0.2 0.4 0.8), oklab)} + +<===> middle/output.css +a { + b: oklab(55.2815992148% -0.0857471824 -0.1749134266); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 -1 0.4 2), oklab)} + +<===> out_of_range/near/output.css +a { + b: oklab(33.9832655696% -2.4377896861 -0.667787683); +} + +<===> +================================================================================ +<===> out_of_range/far/options.yml +:todo: + - dart-sass # w3c/csswg-drafts#9484 + +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 -999999 0 0), oklab)} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0.1 0.2 0.3 / 0.4), oklab)} + +<===> alpha/partial/output.css +a { + b: oklab(36.3512304678% -0.050217455 -0.0580072349 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0.1 0.2 0.3 / 0.0), oklab)} + +<===> alpha/transparent/output.css +a { + b: oklab(36.3512304678% -0.050217455 -0.0580072349 / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 none 0.2 0.3), oklab)} + +<===> missing/red/output.css +a { + b: oklab(34.1361541836% -0.1128551253 -0.067830888); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0.1 none 0.3), oklab)} + +<===> missing/green/output.css +a { + b: oklab(25.3247541535% 0.0750438961 -0.1364735034); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0.1 0.2 none), oklab)} + +<===> missing/blue/output.css +a { + b: oklab(34.13560351% -0.0917726115 0.0859786399); +} diff --git a/spec/core_functions/color/to_space/rec2020/oklch.hrx b/spec/core_functions/color/to_space/rec2020/oklch.hrx new file mode 100644 index 000000000..6e58a0250 --- /dev/null +++ b/spec/core_functions/color/to_space/rec2020/oklch.hrx @@ -0,0 +1,117 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0 0 0), oklch)} + +<===> black/output.css +a { + b: oklch(0% 0 none); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 1 1 1), oklch)} + +<===> white/output.css +a { + b: oklch(99.9999993474% 0.0000000373 89.8755622419deg); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0.5 0.5 0.5), oklch)} + +<===> gray/output.css +a { + b: oklch(63.8020766953% 0.0000000238 89.8755631672deg); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0.2 0.4 0.8), oklch)} + +<===> middle/output.css +a { + b: oklch(55.2815992148% 0.1948006317 243.8846858979deg); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 -1 0.4 2), oklch)} + +<===> out_of_range/near/output.css +a { + b: oklch(33.9832655696% 2.5275994429 195.319325973deg); +} + +<===> +================================================================================ +<===> out_of_range/far/options.yml +:todo: + - dart-sass # w3c/csswg-drafts#9484 + +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 -999999 0 0), oklch)} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0.1 0.2 0.3 / 0.4), oklch)} + +<===> alpha/partial/output.css +a { + b: oklch(36.3512304678% 0.0767243904 229.1169268509deg / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0.1 0.2 0.3 / 0.0), oklch)} + +<===> alpha/transparent/output.css +a { + b: oklch(36.3512304678% 0.0767243904 229.1169268509deg / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 none 0.2 0.3), oklch)} + +<===> missing/red/output.css +a { + b: oklch(34.1361541836% 0.1316712143 211.0077162465deg); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0.1 none 0.3), oklch)} + +<===> missing/green/output.css +a { + b: oklch(25.3247541535% 0.155745316 298.8054651649deg); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0.1 0.2 none), oklch)} + +<===> missing/blue/output.css +a { + b: oklch(34.13560351% 0.1257558697 136.866949571deg); +} diff --git a/spec/core_functions/color/to_space/rec2020/prophoto_rgb.hrx b/spec/core_functions/color/to_space/rec2020/prophoto_rgb.hrx new file mode 100644 index 000000000..67c4fe906 --- /dev/null +++ b/spec/core_functions/color/to_space/rec2020/prophoto_rgb.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0 0 0), prophoto-rgb)} + +<===> black/output.css +a { + b: color(prophoto-rgb 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 1 1 1), prophoto-rgb)} + +<===> white/output.css +a { + b: color(prophoto-rgb 1 1 1); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0.5 0.5 0.5), prophoto-rgb)} + +<===> gray/output.css +a { + b: color(prophoto-rgb 0.4728514184 0.4728514184 0.4728514184); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0.2 0.4 0.8), prophoto-rgb)} + +<===> middle/output.css +a { + b: color(prophoto-rgb 0.3205854039 0.3793783564 0.7698022311); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 -1 0.4 2), prophoto-rgb)} + +<===> out_of_range/near/output.css +a { + b: color(prophoto-rgb -0.5478493377 0.3839894918 2.1828841348); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 -999999 0 0), prophoto-rgb)} + +<===> out_of_range/far/output.css +a { + b: color(prophoto-rgb -20568106.26542821 -4493352.638848251 785798.3189394); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0.1 0.2 0.3 / 0.4), prophoto-rgb)} + +<===> alpha/partial/output.css +a { + b: color(prophoto-rgb 0.1520851228 0.1987719462 0.283976665 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0.1 0.2 0.3 / 0.0), prophoto-rgb)} + +<===> alpha/transparent/output.css +a { + b: color(prophoto-rgb 0.1520851228 0.1987719462 0.283976665 / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 none 0.2 0.3), prophoto-rgb)} + +<===> missing/red/output.css +a { + b: color(prophoto-rgb none 0.1963011404 0.2840567616); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0.1 none 0.3), prophoto-rgb)} + +<===> missing/green/output.css +a { + b: color(prophoto-rgb 0.1451585947 none 0.2808956158); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0.1 0.2 none), prophoto-rgb)} + +<===> missing/blue/output.css +a { + b: color(prophoto-rgb 0.1184473522 0.1951112391 none); +} diff --git a/spec/core_functions/color/to_space/rec2020/rec2020.hrx b/spec/core_functions/color/to_space/rec2020/rec2020.hrx new file mode 100644 index 000000000..bf9ceadd1 --- /dev/null +++ b/spec/core_functions/color/to_space/rec2020/rec2020.hrx @@ -0,0 +1,52 @@ +<===> in_range/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0.2 0.4 0.8), rec2020)} + +<===> in_range/output.css +a { + b: color(rec2020 0.2 0.4 0.8); +} + +<===> +================================================================================ +<===> out_of_range/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 -1 0.4 2), rec2020)} + +<===> out_of_range/output.css +a { + b: color(rec2020 -1 0.4 2); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 none 0.2 0.3), rec2020)} + +<===> missing/red/output.css +a { + b: color(rec2020 none 0.2 0.3); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0.1 none 0.3), rec2020)} + +<===> missing/green/output.css +a { + b: color(rec2020 0.1 none 0.3); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0.1 0.2 none), rec2020)} + +<===> missing/blue/output.css +a { + b: color(rec2020 0.1 0.2 none); +} diff --git a/spec/core_functions/color/to_space/rec2020/rgb.hrx b/spec/core_functions/color/to_space/rec2020/rgb.hrx new file mode 100644 index 000000000..cd87c3b27 --- /dev/null +++ b/spec/core_functions/color/to_space/rec2020/rgb.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0 0 0), rgb)} + +<===> black/output.css +a { + b: black; +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 1 1 1), rgb)} + +<===> white/output.css +a { + b: white; +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0.5 0.5 0.5), rgb)} + +<===> gray/output.css +a { + b: rgb(139.3788156739, 139.3788156739, 139.3788156739); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0.2 0.4 0.8), rgb)} + +<===> middle/output.css +a { + b: hsl(200.8128966593, 189.0732219315%, 29.5081773497%); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 -1 0.4 2), rgb)} + +<===> out_of_range/near/output.css +a { + b: hsl(204.9795970204, 570.1567645938%, 29.20918492%); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 -999999 0 0), rgb)} + +<===> out_of_range/far/output.css +a { + b: hsl(351.6022221471, 202.9643125658%, -14161586.907056699%); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0.1 0.2 0.3 / 0.4), rgb)} + +<===> alpha/partial/output.css +a { + b: hsla(194.5479244469, 123.11735267%, 16.5168092719%, 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0.1 0.2 0.3 / 0.0), rgb)} + +<===> alpha/transparent/output.css +a { + b: hsla(194.5479244469, 123.11735267%, 16.5168092719%, 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 none 0.2 0.3), rgb)} + +<===> missing/red/output.css +a { + b: rgb(0, 70.4374731297, 94.1362889109); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0.1 none 0.3), rgb)} + +<===> missing/green/output.css +a { + b: rgb(48.0971037271, 0, 96.1865319755); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0.1 0.2 none), rgb)} + +<===> missing/blue/output.css +a { + b: rgb(14.8533924164, 69.337066059, 0); +} diff --git a/spec/core_functions/color/to_space/rec2020/srgb.hrx b/spec/core_functions/color/to_space/rec2020/srgb.hrx new file mode 100644 index 000000000..467aa2fc9 --- /dev/null +++ b/spec/core_functions/color/to_space/rec2020/srgb.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0 0 0), srgb)} + +<===> black/output.css +a { + b: color(srgb 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 1 1 1), srgb)} + +<===> white/output.css +a { + b: color(srgb 1 1 1); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0.5 0.5 0.5), srgb)} + +<===> gray/output.css +a { + b: color(srgb 0.5465835909 0.5465835909 0.5465835909); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0.2 0.4 0.8), srgb)} + +<===> middle/output.css +a { + b: color(srgb -0.262838843 0.4659375855 0.85300239); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 -1 0.4 2), srgb)} + +<===> out_of_range/near/output.css +a { + b: color(srgb -1.3732895878 0.5707880468 1.9574732862); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 -999999 0 0), srgb)} + +<===> out_of_range/far/output.css +a { + b: color(srgb -429045.5442137942 145813.8060726603 65354.787400083); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0.1 0.2 0.3 / 0.4), srgb)} + +<===> alpha/partial/output.css +a { + b: color(srgb -0.0381824905 0.2699077119 0.3685186759 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0.1 0.2 0.3 / 0.0), srgb)} + +<===> alpha/transparent/output.css +a { + b: color(srgb -0.0381824905 0.2699077119 0.3685186759 / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 none 0.2 0.3), srgb)} + +<===> missing/red/output.css +a { + b: color(srgb none 0.2762253848 0.3691619173); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0.1 none 0.3), srgb)} + +<===> missing/green/output.css +a { + b: color(srgb 0.188616093 none 0.3772020862); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0.1 0.2 none), srgb)} + +<===> missing/blue/output.css +a { + b: color(srgb 0.0582485977 0.271910063 none); +} diff --git a/spec/core_functions/color/to_space/rec2020/srgb_linear.hrx b/spec/core_functions/color/to_space/rec2020/srgb_linear.hrx new file mode 100644 index 000000000..5b8ede6c3 --- /dev/null +++ b/spec/core_functions/color/to_space/rec2020/srgb_linear.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0 0 0), srgb-linear)} + +<===> black/output.css +a { + b: color(srgb-linear 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 1 1 1), srgb-linear)} + +<===> white/output.css +a { + b: color(srgb-linear 1 1 1); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0.5 0.5 0.5), srgb-linear)} + +<===> gray/output.css +a { + b: color(srgb-linear 0.2597194371 0.2597194371 0.2597194371); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0.2 0.4 0.8), srgb-linear)} + +<===> middle/output.css +a { + b: color(srgb-linear -0.0561682415 0.1838568265 0.6975942253); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 -1 0.4 2), srgb-linear)} + +<===> out_of_range/near/output.css +a { + b: color(srgb-linear -2.0689650071 0.28550882 4.7113611346); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 -999999 0 0), srgb-linear)} + +<===> out_of_range/far/output.css +a { + b: color(srgb-linear -28986940627436.953 2174258821934.0952 316855134441.09607); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0.1 0.2 0.3 / 0.4), srgb-linear)} + +<===> alpha/partial/output.css +a { + b: color(srgb-linear -0.0029553011 0.0592131472 0.111863462 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0.1 0.2 0.3 / 0.0), srgb-linear)} + +<===> alpha/transparent/output.css +a { + b: color(srgb-linear -0.0029553011 0.0592131472 0.111863462 / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 none 0.2 0.3), srgb-linear)} + +<===> missing/red/output.css +a { + b: color(srgb-linear none 0.0620141462 0.1122716521); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0.1 none 0.3), srgb-linear)} + +<===> missing/green/output.css +a { + b: color(srgb-linear 0.0296680112 none 0.1174471704); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0.1 0.2 none), srgb-linear)} + +<===> missing/blue/output.css +a { + b: color(srgb-linear 0.004719249 0.0600927379 none); +} diff --git a/spec/core_functions/color/to_space/rec2020/xyz.hrx b/spec/core_functions/color/to_space/rec2020/xyz.hrx new file mode 100644 index 000000000..e563e7e8e --- /dev/null +++ b/spec/core_functions/color/to_space/rec2020/xyz.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0 0 0), xyz)} + +<===> black/output.css +a { + b: color(xyz 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 1 1 1), xyz)} + +<===> white/output.css +a { + b: color(xyz 0.9504559271 1 1.0890577508); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0.5 0.5 0.5), xyz)} + +<===> gray/output.css +a { + b: color(xyz 0.2468518784 0.2597194371 0.282849466); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0.2 0.4 0.8), xyz)} + +<===> middle/output.css +a { + b: color(xyz 0.1684834116 0.1699060269 0.6839147362); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 -1 0.4 2), xyz)} + +<===> out_of_range/near/output.css +a { + b: color(xyz 0.0991815219 0.1043683721 4.4723366127); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 -999999 0 0), xyz)} + +<===> out_of_range/far/output.css +a { + b: color(xyz -11119280444659.668 -4585917923503.705 0); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0.1 0.2 0.3 / 0.4), xyz)} + +<===> alpha/partial/output.css +a { + b: color(xyz 0.0401441609 0.0497946582 0.1133305869 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0.1 0.2 0.3 / 0.0), xyz)} + +<===> alpha/transparent/output.css +a { + b: color(xyz 0.0401441609 0.0497946582 0.1133305869 / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 none 0.2 0.3), xyz)} + +<===> missing/red/output.css +a { + b: color(xyz none 0.0438868281 0.1133305869); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0.1 none 0.3), xyz)} + +<===> missing/green/output.css +a { + b: color(xyz 0.0321156515 none 0.1117721115); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0.1 0.2 none), xyz)} + +<===> missing/blue/output.css +a { + b: color(xyz 0.0223529743 0.0435473713 none); +} diff --git a/spec/core_functions/color/to_space/rec2020/xyz_d50.hrx b/spec/core_functions/color/to_space/rec2020/xyz_d50.hrx new file mode 100644 index 000000000..170adbf50 --- /dev/null +++ b/spec/core_functions/color/to_space/rec2020/xyz_d50.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0 0 0), xyz-d50)} + +<===> black/output.css +a { + b: color(xyz-d50 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 1 1 1), xyz-d50)} + +<===> white/output.css +a { + b: color(xyz-d50 0.9642956764 1 0.8251046025); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0.5 0.5 0.5), xyz-d50)} + +<===> gray/output.css +a { + b: color(xyz-d50 0.2504463303 0.2597194371 0.2142957029); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0.2 0.4 0.8), xyz-d50)} + +<===> middle/output.css +a { + b: color(xyz-d50 0.1461303676 0.1615955499 0.5152185696); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 -1 0.4 2), xyz-d50)} + +<===> out_of_range/near/output.css +a { + b: color(xyz-d50 -0.1181465111 0.0299487833 3.363289424); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 -999999 0 0), xyz-d50)} + +<===> out_of_range/far/output.css +a { + b: color(xyz-d50 -11757457714802.084 -4871490904380.732 33734088609.397465); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0.1 0.2 0.3 / 0.4), xyz-d50)} + +<===> alpha/partial/output.css +a { + b: color(xyz-d50 0.0375225748 0.0485727436 0.0855889676 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0.1 0.2 0.3 / 0.0), xyz-d50)} + +<===> alpha/transparent/output.css +a { + b: color(xyz-d50 0.0375225748 0.0485727436 0.0855889676 / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 none 0.2 0.3), xyz-d50)} + +<===> missing/red/output.css +a { + b: color(xyz-d50 none 0.0422970228 0.0856324257); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0.1 none 0.3), xyz-d50)} + +<===> missing/green/output.css +a { + b: color(xyz-d50 0.0283237743 none 0.0839247274); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(rec2020 0.1 0.2 none), xyz-d50)} + +<===> missing/blue/output.css +a { + b: color(xyz-d50 0.0243454002 0.0437664763 none); +} diff --git a/spec/core_functions/color/to_space/rgb/a98_rgb.hrx b/spec/core_functions/color/to_space/rgb/a98_rgb.hrx new file mode 100644 index 000000000..ec89c733b --- /dev/null +++ b/spec/core_functions/color/to_space/rgb/a98_rgb.hrx @@ -0,0 +1,129 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(#000, a98-rgb)} + +<===> black/output.css +a { + b: color(a98-rgb 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(#fff, a98-rgb)} + +<===> white/output.css +a { + b: color(a98-rgb 1 1 1); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(#aaa, a98-rgb)} + +<===> gray/output.css +a { + b: color(a98-rgb 0.660735938 0.660735938 0.660735938); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(#28d, a98-rgb)} + +<===> middle/output.css +a { + b: color(a98-rgb 0.3199480242 0.5287075634 0.8521762133); +} + +<===> +================================================================================ +<===> float/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(50.123456789 100.987654321 200.192837465), a98-rgb)} + +<===> float/output.css +a { + b: color(a98-rgb 0.2781926905 0.395603604 0.7684686532); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(-50, 100, 400), a98-rgb)} + +<===> out_of_range/near/output.css +a { + b: color(a98-rgb 0.1411766693 0.3918977213 1.5718485866); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(-999999, 0, 0), a98-rgb)} + +<===> out_of_range/far/output.css +a { + b: color(a98-rgb -6760.0211192379 0 0); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(10 20 30 / 0.4), a98-rgb)} + +<===> alpha/partial/output.css +a { + b: color(a98-rgb 0.0827079329 0.1047180692 0.1375163198 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(10 20 30 / 0.0), a98-rgb)} + +<===> alpha/transparent/output.css +a { + b: color(a98-rgb 0.0827079329 0.1047180692 0.1375163198 / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(none 20 30), a98-rgb)} + +<===> missing/red/output.css +a { + b: color(a98-rgb none 0.1047180692 0.1375163198); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(10 none 30), a98-rgb)} + +<===> missing/green/output.css +a { + b: color(a98-rgb 0.0615069668 none 0.1360938515); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(10 20 none), a98-rgb)} + +<===> missing/blue/output.css +a { + b: color(a98-rgb 0.0827079329 0.1047180692 none); +} diff --git a/spec/core_functions/color/to_space/rgb/display_p3.hrx b/spec/core_functions/color/to_space/rgb/display_p3.hrx new file mode 100644 index 000000000..379927056 --- /dev/null +++ b/spec/core_functions/color/to_space/rgb/display_p3.hrx @@ -0,0 +1,129 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(#000, display-p3)} + +<===> black/output.css +a { + b: color(display-p3 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(#fff, display-p3)} + +<===> white/output.css +a { + b: color(display-p3 1 1 1); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(#aaa, display-p3)} + +<===> gray/output.css +a { + b: color(display-p3 0.6666666667 0.6666666667 0.6666666667); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(#28d, display-p3)} + +<===> middle/output.css +a { + b: color(display-p3 0.2644791221 0.525654809 0.8414340148); +} + +<===> +================================================================================ +<===> float/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(50.123456789 100.987654321 200.192837465), display-p3)} + +<===> float/output.css +a { + b: color(display-p3 0.2464159945 0.3912935228 0.7592218197); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(-50, 100, 400), display-p3)} + +<===> out_of_range/near/output.css +a { + b: color(display-p3 -0.0462648785 0.3843286419 1.5086360967); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(-999999, 0, 0), display-p3)} + +<===> out_of_range/far/output.css +a { + b: color(display-p3 -3614.8515104566 -948.8907591358 -719.4436054746); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(10 20 30 / 0.4), display-p3)} + +<===> alpha/partial/output.css +a { + b: color(display-p3 0.0477705982 0.0773808537 0.1142571507 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(10 20 30 / 0.0), display-p3)} + +<===> alpha/transparent/output.css +a { + b: color(display-p3 0.0477705982 0.0773808537 0.1142571507 / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(none 20 30), display-p3)} + +<===> missing/red/output.css +a { + b: color(display-p3 none 0.0765677073 0.1139614092); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(10 none 30), display-p3)} + +<===> missing/green/output.css +a { + b: color(display-p3 0.0322534105 none 0.1113368327); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(10 20 none), display-p3)} + +<===> missing/blue/output.css +a { + b: color(display-p3 0.0477705982 0.0773808537 none); +} diff --git a/spec/core_functions/color/to_space/rgb/hsl.hrx b/spec/core_functions/color/to_space/rgb/hsl.hrx new file mode 100644 index 000000000..d00375dde --- /dev/null +++ b/spec/core_functions/color/to_space/rgb/hsl.hrx @@ -0,0 +1,129 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(#000, hsl)} + +<===> black/output.css +a { + b: hsl(0, 0%, 0%); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(#fff, hsl)} + +<===> white/output.css +a { + b: hsl(0, 0%, 100%); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(#aaa, hsl)} + +<===> gray/output.css +a { + b: hsl(0, 0%, 66.6666666667%); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(#28d, hsl)} + +<===> middle/output.css +a { + b: hsl(207.2727272727, 73.3333333333%, 50%); +} + +<===> +================================================================================ +<===> float/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(50.123456789 100.987654321 200.192837465), hsl)} + +<===> float/output.css +a { + b: hsl(219.6637272829, 59.9519025013%, 49.0816263243%); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(-50, 100, 400), hsl)} + +<===> out_of_range/near/output.css +a { + b: hsl(220, 281.25%, 68.6274509804%); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(-999999, 0, 0), hsl)} + +<===> out_of_range/far/output.css +a { + b: hsl(0, 100%, -196078.2352941177%); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(10 20 30 / 0.4), hsl)} + +<===> alpha/partial/output.css +a { + b: hsla(210, 50%, 7.8431372549%, 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(10 20 30 / 0.0), hsl)} + +<===> alpha/transparent/output.css +a { + b: hsla(210, 50%, 7.8431372549%, 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(none 20 30), hsl)} + +<===> missing/red/output.css +a { + b: hsl(200, 100%, 5.8823529412%); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(10 none 30), hsl)} + +<===> missing/green/output.css +a { + b: hsl(260, 100%, 5.8823529412%); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(10 20 none), hsl)} + +<===> missing/blue/output.css +a { + b: hsl(90, 100%, 3.9215686275%); +} diff --git a/spec/core_functions/color/to_space/rgb/hwb.hrx b/spec/core_functions/color/to_space/rgb/hwb.hrx new file mode 100644 index 000000000..e55ad720f --- /dev/null +++ b/spec/core_functions/color/to_space/rgb/hwb.hrx @@ -0,0 +1,165 @@ +<===> black/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(#000, hwb)); + +<===> black/output.css +a { + value: black; + space: hwb; + channels: 0deg 0% 100% / 1; +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(#fff, hwb)); + +<===> white/output.css +a { + value: white; + space: hwb; + channels: 0deg 100% 0% / 1; +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(#aaa, hwb)); + +<===> gray/output.css +a { + value: #aaaaaa; + space: hwb; + channels: 0deg 66.6666666667% 33.3333333333% / 1; +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(#28d, hwb)); + +<===> middle/output.css +a { + value: #2288dd; + space: hwb; + channels: 207.2727272727deg 13.3333333333% 13.3333333333% / 1; +} + +<===> +================================================================================ +<===> float/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect( + color.to-space(rgb(50.123456789 100.987654321 200.192837465), hwb) +); + +<===> float/output.css +a { + value: hsl(219.6637272829, 59.9519025013%, 49.0816263243%); + space: hwb; + channels: 219.6637272829deg 19.6562575643% 21.4930049157% / 1; +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(rgb(-50, 100, 400), hwb)); + +<===> out_of_range/near/output.css +a { + value: hsl(220, 281.25%, 68.6274509804%); + space: hwb; + channels: 220deg -19.6078431373% -56.862745098% / 1; +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(rgb(-999999, 0, 0), hwb)); + +<===> out_of_range/far/output.css +a { + value: hsl(0, 100%, -196078.2352941177%); + space: hwb; + channels: 180deg -392156.4705882354% 100% / 1; +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(rgb(10 20 30 / 0.4), hwb)); + +<===> alpha/partial/output.css +a { + value: hsla(210, 50%, 7.8431372549%, 0.4); + space: hwb; + channels: 210deg 3.9215686275% 88.2352941176% / 0.4; +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(rgb(10 20 30 / 0.0), hwb)); + +<===> alpha/transparent/output.css +a { + value: hsla(210, 50%, 7.8431372549%, 0); + space: hwb; + channels: 210deg 3.9215686275% 88.2352941176% / 0; +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(rgb(none 20 30), hwb)); + +<===> missing/red/output.css +a { + value: #00141e; + space: hwb; + channels: 200deg 0% 88.2352941176% / 1; +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(rgb(10 none 30), hwb)); + +<===> missing/green/output.css +a { + value: #0a001e; + space: hwb; + channels: 260deg 0% 88.2352941176% / 1; +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +a {b: color.to-space(rgb(10 20 none), hwb)} + +<===> missing/blue/output.css +a { + b: #0a1400; +} diff --git a/spec/core_functions/color/to_space/rgb/lab.hrx b/spec/core_functions/color/to_space/rgb/lab.hrx new file mode 100644 index 000000000..efe84fec2 --- /dev/null +++ b/spec/core_functions/color/to_space/rgb/lab.hrx @@ -0,0 +1,128 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(#000, lab)} + +<===> black/output.css +a { + b: lab(0% 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(#fff, lab)} + +<===> white/output.css +a { + b: lab(100% 0 0); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(#aaa, lab)} + +<===> gray/output.css +a { + b: lab(69.61016583% 0 0); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(#28d, lab)} + +<===> middle/output.css +a { + b: lab(54.4372323192% -5.0725440763 -52.2489046102); +} + +<===> +================================================================================ +<===> float/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(50.123456789 100.987654321 200.192837465), lab)} + +<===> float/output.css +a { + b: lab(43.5786666948% 10.234304882 -57.7772280218); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(-50, 100, 400), lab)} + +<===> out_of_range/near/output.css +a { + b: lab(57.5459692675% 67.2901769646 -142.8196552841); +} + +<===> +================================================================================ +<===> out_of_range/far/options.yml +:todo: + - dart-sass # w3c/csswg-drafts#9484 + +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(-999999, 0, 0), lab)} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(10 20 30 / 0.4), lab)} + +<===> alpha/partial/output.css +a { + b: lab(5.8508980612% -1.4961467566 -8.2549264931 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(10 20 30 / 0.0), lab)} + +<===> alpha/transparent/output.css +a { + b: lab(5.8508980612% -1.4961467566 -8.2549264931 / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(none 20 30), lab)} + +<===> missing/red/output.css +a { + b: lab(5.2408778377% -4.2109320426 -9.2418429616); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(10 none 30), lab)} + +<===> missing/green/output.css +a { + b: lab(1.3209405601% 7.1508367815 -15.0002069297); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(10 20 none), lab)} + +<===> missing/blue/output.css +a { + b: lab(5.1399777246% -5.9321982521 7.5003938134); +} diff --git a/spec/core_functions/color/to_space/rgb/lch.hrx b/spec/core_functions/color/to_space/rgb/lch.hrx new file mode 100644 index 000000000..2d783d21a --- /dev/null +++ b/spec/core_functions/color/to_space/rgb/lch.hrx @@ -0,0 +1,128 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(#000, lch)} + +<===> black/output.css +a { + b: lch(0% 0 none); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(#fff, lch)} + +<===> white/output.css +a { + b: lch(100% 0 none); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(#aaa, lch)} + +<===> gray/output.css +a { + b: lch(69.61016583% 0 none); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(#28d, lch)} + +<===> middle/output.css +a { + b: lch(54.4372323192% 52.4945591121 264.454862058deg); +} + +<===> +================================================================================ +<===> float/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(50.123456789 100.987654321 200.192837465), lch)} + +<===> float/output.css +a { + b: lch(43.5786666948% 58.6766484583 280.0448319605deg); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(-50, 100, 400), lch)} + +<===> out_of_range/near/output.css +a { + b: lch(57.5459692675% 157.8778700497 295.2276977506deg); +} + +<===> +================================================================================ +<===> out_of_range/far/options.yml +:todo: + - dart-sass # w3c/csswg-drafts#9484 + +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(-999999, 0, 0), lch)} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(10 20 30 / 0.4), lch)} + +<===> alpha/partial/output.css +a { + b: lch(5.8508980612% 8.3894139559 259.7270636253deg / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(10 20 30 / 0.0), lch)} + +<===> alpha/transparent/output.css +a { + b: lch(5.8508980612% 8.3894139559 259.7270636253deg / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(none 20 30), lch)} + +<===> missing/red/output.css +a { + b: lch(5.2408778377% 10.1559642572 245.5042015895deg); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(10 none 30), lch)} + +<===> missing/green/output.css +a { + b: lch(1.3209405601% 16.6174809948 295.4878788717deg); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(10 20 none), lch)} + +<===> missing/blue/output.css +a { + b: lch(5.1399777246% 9.5627863857 128.3411151091deg); +} diff --git a/spec/core_functions/color/to_space/rgb/oklab.hrx b/spec/core_functions/color/to_space/rgb/oklab.hrx new file mode 100644 index 000000000..1bd14c453 --- /dev/null +++ b/spec/core_functions/color/to_space/rgb/oklab.hrx @@ -0,0 +1,128 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(#000, oklab)} + +<===> black/output.css +a { + b: oklab(0% 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(#fff, oklab)} + +<===> white/output.css +a { + b: oklab(99.9999993474% 0.0000000001 0.0000000373); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(#aaa, oklab)} + +<===> gray/output.css +a { + b: oklab(73.8018666132% 0.0000000001 0.0000000275); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(#28d, oklab)} + +<===> middle/output.css +a { + b: oklab(61.3651179384% -0.0551812368 -0.1461735753); +} + +<===> +================================================================================ +<===> float/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(50.123456789 100.987654321 200.192837465), oklab)} + +<===> float/output.css +a { + b: oklab(52.7265723906% -0.0228233564 -0.1626243735); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(-50, 100, 400), oklab)} + +<===> out_of_range/near/output.css +a { + b: oklab(69.4063330454% -0.0570651814 -0.4015686842); +} + +<===> +================================================================================ +<===> out_of_range/far/options.yml +:todo: + - dart-sass # w3c/csswg-drafts#9484 + +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(-999999, 0, 0), oklab)} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(10 20 30 / 0.4), oklab)} + +<===> alpha/partial/output.css +a { + b: oklab(18.6989144442% -0.0089460528 -0.0237039533 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(10 20 30 / 0.0), oklab)} + +<===> alpha/transparent/output.css +a { + b: oklab(18.6989144442% -0.0089460528 -0.0237039533 / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(none 20 30), oklab)} + +<===> missing/red/output.css +a { + b: oklab(17.9105838927% -0.0229309101 -0.0273761686); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(10 none 30), oklab)} + +<===> missing/green/output.css +a { + b: oklab(12.5934961979% 0.0296887787 -0.0622382911); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(10 20 none), oklab)} + +<===> missing/blue/output.css +a { + b: oklab(17.4737572915% -0.0289569456 0.036012989); +} diff --git a/spec/core_functions/color/to_space/rgb/oklch.hrx b/spec/core_functions/color/to_space/rgb/oklch.hrx new file mode 100644 index 000000000..5c5f880c8 --- /dev/null +++ b/spec/core_functions/color/to_space/rgb/oklch.hrx @@ -0,0 +1,128 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(#000, oklch)} + +<===> black/output.css +a { + b: oklch(0% 0 none); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(#fff, oklch)} + +<===> white/output.css +a { + b: oklch(99.9999993474% 0.0000000373 89.8755630959deg); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(#aaa, oklch)} + +<===> gray/output.css +a { + b: oklch(73.8018666132% 0.0000000275 89.8755625379deg); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(#28d, oklch)} + +<===> middle/output.css +a { + b: oklch(61.3651179384% 0.1562423854 249.3182340149deg); +} + +<===> +================================================================================ +<===> float/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(50.123456789 100.987654321 200.192837465), oklch)} + +<===> float/output.css +a { + b: oklch(52.7265723906% 0.1642181246 262.0110592016deg); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(-50, 100, 400), oklch)} + +<===> out_of_range/near/output.css +a { + b: oklch(69.4063330454% 0.405603061 261.9120979439deg); +} + +<===> +================================================================================ +<===> out_of_range/far/options.yml +:todo: + - dart-sass # w3c/csswg-drafts#9484 + +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(-999999, 0, 0), oklch)} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(10 20 30 / 0.4), oklch)} + +<===> alpha/partial/output.css +a { + b: oklch(18.6989144442% 0.0253359283 249.3231108283deg / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(10 20 30 / 0.0), oklch)} + +<===> alpha/transparent/output.css +a { + b: oklch(18.6989144442% 0.0253359283 249.3231108283deg / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(none 20 30), oklch)} + +<===> missing/red/output.css +a { + b: oklch(17.9105838927% 0.0357110801 230.049682151deg); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(10 none 30), oklch)} + +<===> missing/green/output.css +a { + b: oklch(12.5934961979% 0.0689567144 295.5019774012deg); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(10 20 none), oklch)} + +<===> missing/blue/output.css +a { + b: oklch(17.4737572915% 0.0462108221 128.8016996944deg); +} diff --git a/spec/core_functions/color/to_space/rgb/prophoto_rgb.hrx b/spec/core_functions/color/to_space/rgb/prophoto_rgb.hrx new file mode 100644 index 000000000..eb60bb275 --- /dev/null +++ b/spec/core_functions/color/to_space/rgb/prophoto_rgb.hrx @@ -0,0 +1,129 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(#000, prophoto-rgb)} + +<===> black/output.css +a { + b: color(prophoto-rgb 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(#fff, prophoto-rgb)} + +<===> white/output.css +a { + b: color(prophoto-rgb 1 1 1); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(#aaa, prophoto-rgb)} + +<===> gray/output.css +a { + b: color(prophoto-rgb 0.6027153447 0.6027153447 0.6027153447); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(#28d, prophoto-rgb)} + +<===> middle/output.css +a { + b: color(prophoto-rgb 0.3990854669 0.4493912175 0.7905294798); +} + +<===> +================================================================================ +<===> float/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(50.123456789 100.987654321 200.192837465), prophoto-rgb)} + +<===> float/output.css +a { + b: color(prophoto-rgb 0.3371488337 0.3261543399 0.6930068512); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(-50, 100, 400), prophoto-rgb)} + +<===> out_of_range/near/output.css +a { + b: color(prophoto-rgb 0.6182230836 0.3944820605 1.6451734949); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(-999999, 0, 0), prophoto-rgb)} + +<===> out_of_range/far/output.css +a { + b: color(prophoto-rgb -40436.5951245925 -15876.4400699537 -5962.4442405194); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(10 20 30 / 0.4), prophoto-rgb)} + +<===> alpha/partial/output.css +a { + b: color(prophoto-rgb 0.0568847736 0.0623636876 0.0861178613 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(10 20 30 / 0.0), prophoto-rgb)} + +<===> alpha/transparent/output.css +a { + b: color(prophoto-rgb 0.0568847736 0.0623636876 0.0861178613 / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(none 20 30), prophoto-rgb)} + +<===> missing/red/output.css +a { + b: color(prophoto-rgb none 0.0608214606 0.0859153209); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(10 none 30), prophoto-rgb)} + +<===> missing/green/output.css +a { + b: color(prophoto-rgb 0.0427390372 none 0.0828155088); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(10 20 none), prophoto-rgb)} + +<===> missing/blue/output.css +a { + b: color(prophoto-rgb 0.0459932777 0.0604706464 none); +} diff --git a/spec/core_functions/color/to_space/rgb/rec2020.hrx b/spec/core_functions/color/to_space/rgb/rec2020.hrx new file mode 100644 index 000000000..00015992e --- /dev/null +++ b/spec/core_functions/color/to_space/rgb/rec2020.hrx @@ -0,0 +1,129 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(#000, rec2020)} + +<===> black/output.css +a { + b: color(rec2020 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(#fff, rec2020)} + +<===> white/output.css +a { + b: color(rec2020 1 1 1); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(#aaa, rec2020)} + +<===> gray/output.css +a { + b: color(rec2020 0.630170586 0.630170586 0.630170586); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(#28d, rec2020)} + +<===> middle/output.css +a { + b: color(rec2020 0.327926145 0.4744067013 0.818404902); +} + +<===> +================================================================================ +<===> float/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(50.123456789 100.987654321 200.192837465), rec2020)} + +<===> float/output.css +a { + b: color(rec2020 0.2689744026 0.3372277303 0.7270775308); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(-50, 100, 400), rec2020)} + +<===> out_of_range/near/output.css +a { + b: color(rec2020 0.3600781868 0.3645236247 1.5702758315); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(-999999, 0, 0), rec2020)} + +<===> out_of_range/far/output.css +a { + b: color(rec2020 -6394.9114299566 -2369.6504581671 -1240.1892051013); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(10 20 30 / 0.4), rec2020)} + +<===> alpha/partial/output.css +a { + b: color(rec2020 0.0214656524 0.0305541381 0.055318427 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(10 20 30 / 0.0), rec2020)} + +<===> alpha/transparent/output.css +a { + b: color(rec2020 0.0214656524 0.0305541381 0.055318427 / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(none 20 30), rec2020)} + +<===> missing/red/output.css +a { + b: color(rec2020 none 0.029610358 0.055094541); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(10 none 30), rec2020)} + +<===> missing/green/output.css +a { + b: color(rec2020 0.0111000377 none 0.0525478256); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(10 20 none), rec2020)} + +<===> missing/blue/output.css +a { + b: color(rec2020 0.0189351452 0.0298903102 none); +} diff --git a/spec/core_functions/color/to_space/rgb/rgb.hrx b/spec/core_functions/color/to_space/rgb/rgb.hrx new file mode 100644 index 000000000..e07a670c9 --- /dev/null +++ b/spec/core_functions/color/to_space/rgb/rgb.hrx @@ -0,0 +1,52 @@ +<===> in_range/input.scss +@use 'sass:color'; +a {b: color.to-space(#28d, rgb)} + +<===> in_range/output.css +a { + b: #28d; +} + +<===> +================================================================================ +<===> out_of_range/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(-50, 100, 400), rgb)} + +<===> out_of_range/output.css +a { + b: hsl(220, 281.25%, 68.6274509804%); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(none 20 30), rgb)} + +<===> missing/red/output.css +a { + b: rgb(none 20 30); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(10 none 30), rgb)} + +<===> missing/green/output.css +a { + b: rgb(10 none 30); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(10 20 none), rgb)} + +<===> missing/blue/output.css +a { + b: rgb(10 20 none); +} diff --git a/spec/core_functions/color/to_space/rgb/srgb.hrx b/spec/core_functions/color/to_space/rgb/srgb.hrx new file mode 100644 index 000000000..94b0a76c5 --- /dev/null +++ b/spec/core_functions/color/to_space/rgb/srgb.hrx @@ -0,0 +1,129 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(#000, srgb)} + +<===> black/output.css +a { + b: color(srgb 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(#fff, srgb)} + +<===> white/output.css +a { + b: color(srgb 1 1 1); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(#aaa, srgb)} + +<===> gray/output.css +a { + b: color(srgb 0.6666666667 0.6666666667 0.6666666667); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(#28d, srgb)} + +<===> middle/output.css +a { + b: color(srgb 0.1333333333 0.5333333333 0.8666666667); +} + +<===> +================================================================================ +<===> float/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(50.123456789 100.987654321 200.192837465), srgb)} + +<===> float/output.css +a { + b: color(srgb 0.1965625756 0.3960300169 0.7850699508); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(-50, 100, 400), srgb)} + +<===> out_of_range/near/output.css +a { + b: color(srgb -0.1960784314 0.3921568627 1.568627451); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(-999999, 0, 0), srgb)} + +<===> out_of_range/far/output.css +a { + b: color(srgb -3921.5647058824 0 0); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(10 20 30 / 0.4), srgb)} + +<===> alpha/partial/output.css +a { + b: color(srgb 0.0392156863 0.0784313725 0.1176470588 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(10 20 30 / 0.0), srgb)} + +<===> alpha/transparent/output.css +a { + b: color(srgb 0.0392156863 0.0784313725 0.1176470588 / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(none 20 30), srgb)} + +<===> missing/red/output.css +a { + b: color(srgb none 0.0784313725 0.1176470588); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(10 none 30), srgb)} + +<===> missing/green/output.css +a { + b: color(srgb 0.0392156863 none 0.1176470588); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(10 20 none), srgb)} + +<===> missing/blue/output.css +a { + b: color(srgb 0.0392156863 0.0784313725 none); +} diff --git a/spec/core_functions/color/to_space/rgb/srgb_linear.hrx b/spec/core_functions/color/to_space/rgb/srgb_linear.hrx new file mode 100644 index 000000000..a19f6b487 --- /dev/null +++ b/spec/core_functions/color/to_space/rgb/srgb_linear.hrx @@ -0,0 +1,129 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(#000, srgb-linear)} + +<===> black/output.css +a { + b: color(srgb-linear 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(#fff, srgb-linear)} + +<===> white/output.css +a { + b: color(srgb-linear 1 1 1); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(#aaa, srgb-linear)} + +<===> gray/output.css +a { + b: color(srgb-linear 0.4019777798 0.4019777798 0.4019777798); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(#28d, srgb-linear)} + +<===> middle/output.css +a { + b: color(srgb-linear 0.0159962934 0.2462013267 0.7230551289); +} + +<===> +================================================================================ +<===> float/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(50.123456789 100.987654321 200.192837465), srgb-linear)} + +<===> float/output.css +a { + b: color(srgb-linear 0.0320438415 0.130102957 0.5788301943); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(-50, 100, 400), srgb-linear)} + +<===> out_of_range/near/output.css +a { + b: color(srgb-linear -0.0318960331 0.1274376804 2.8142418811); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(-999999, 0, 0), srgb-linear)} + +<===> out_of_range/far/output.css +a { + b: color(srgb-linear -370263787.91908944 0 0); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(10 20 30 / 0.4), srgb-linear)} + +<===> alpha/partial/output.css +a { + b: color(srgb-linear 0.0030352698 0.0069954102 0.0129830323 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(10 20 30 / 0.0), srgb-linear)} + +<===> alpha/transparent/output.css +a { + b: color(srgb-linear 0.0030352698 0.0069954102 0.0129830323 / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(none 20 30), srgb-linear)} + +<===> missing/red/output.css +a { + b: color(srgb-linear none 0.0069954102 0.0129830323); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(10 none 30), srgb-linear)} + +<===> missing/green/output.css +a { + b: color(srgb-linear 0.0030352698 none 0.0129830323); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(10 20 none), srgb-linear)} + +<===> missing/blue/output.css +a { + b: color(srgb-linear 0.0030352698 0.0069954102 none); +} diff --git a/spec/core_functions/color/to_space/rgb/xyz.hrx b/spec/core_functions/color/to_space/rgb/xyz.hrx new file mode 100644 index 000000000..6758a1e2f --- /dev/null +++ b/spec/core_functions/color/to_space/rgb/xyz.hrx @@ -0,0 +1,129 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(#000, xyz)} + +<===> black/output.css +a { + b: color(xyz 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(#fff, xyz)} + +<===> white/output.css +a { + b: color(xyz 0.9504559271 1 1.0890577508); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(#aaa, xyz)} + +<===> gray/output.css +a { + b: color(xyz 0.3820621634 0.4019777798 0.4377770168); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(#28d, xyz)} + +<===> middle/output.css +a { + b: color(xyz 0.2251320227 0.2316759373 0.7169422823); +} + +<===> +================================================================================ +<===> float/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(50.123456789 100.987654321 200.192837465), xyz)} + +<===> float/output.css +a { + b: color(xyz 0.1642050952 0.1416464224 0.5663237374); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(-50, 100, 400), xyz)} + +<===> out_of_range/near/output.css +a { + b: color(xyz 0.5403326817 0.2875237342 2.689600722); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(-999999, 0, 0), xyz)} + +<===> out_of_range/far/output.css +a { + b: color(xyz -152693379.439195 -78732523.77333492 -7157502.1612122655); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(10 20 30 / 0.4), xyz)} + +<===> alpha/partial/output.css +a { + b: color(xyz 0.0060963544 0.0065855902 0.0132332803 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(10 20 30 / 0.0), xyz)} + +<===> alpha/transparent/output.css +a { + b: color(xyz 0.0060963544 0.0065855902 0.0132332803 / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(none 20 30), xyz)} + +<===> missing/red/output.css +a { + b: color(xyz none 0.0059401734 0.0131746061); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(10 none 30), xyz)} + +<===> missing/green/output.css +a { + b: color(xyz 0.0035949053 none 0.0123994639); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(10 20 none), xyz)} + +<===> missing/blue/output.css +a { + b: color(xyz 0.0037531665 0.005648315 none); +} diff --git a/spec/core_functions/color/to_space/rgb/xyz_d50.hrx b/spec/core_functions/color/to_space/rgb/xyz_d50.hrx new file mode 100644 index 000000000..e6bdf7853 --- /dev/null +++ b/spec/core_functions/color/to_space/rgb/xyz_d50.hrx @@ -0,0 +1,129 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(#000, xyz-d50)} + +<===> black/output.css +a { + b: color(xyz-d50 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(#fff, xyz-d50)} + +<===> white/output.css +a { + b: color(xyz-d50 0.9642956764 1 0.8251046025); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(#aaa, xyz-d50)} + +<===> gray/output.css +a { + b: color(xyz-d50 0.3876254351 0.4019777798 0.3316737162); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(#28d, xyz-d50)} + +<===> middle/output.css +a { + b: color(xyz-d50 0.2052538337 0.2238890642 0.5404574845); +} + +<===> +================================================================================ +<===> float/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(50.123456789 100.987654321 200.192837465), xyz-d50)} + +<===> float/output.css +a { + b: color(xyz-d50 0.1469006816 0.1354872326 0.4264190127); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(-50, 100, 400), xyz-d50)} + +<===> out_of_range/near/output.css +a { + b: color(xyz-d50 0.4378313293 0.2548605759 2.0215760182); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(-999999, 0, 0), xyz-d50)} + +<===> out_of_range/far/output.css +a { + b: color(xyz-d50 -161459355.2194338 -82381166.54311071 -5155523.903641009); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(10 20 30 / 0.4), xyz-d50)} + +<===> alpha/partial/output.css +a { + b: color(xyz-d50 0.0058754618 0.0064772745 0.0099925616 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(10 20 30 / 0.0), xyz-d50)} + +<===> alpha/transparent/output.css +a { + b: color(xyz-d50 0.0058754618 0.0064772745 0.0099925616 / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(none 20 30), xyz-d50)} + +<===> missing/red/output.css +a { + b: color(xyz-d50 none 0.0058019477 0.0099502987); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(10 none 30), xyz-d50)} + +<===> missing/green/output.css +a { + b: color(xyz-d50 0.003181169 none 0.0093134379); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(rgb(10 20 none), xyz-d50)} + +<===> missing/blue/output.css +a { + b: color(xyz-d50 0.00401787 0.0056902455 none); +} diff --git a/spec/core_functions/color/to_space/srgb/a98_rgb.hrx b/spec/core_functions/color/to_space/srgb/a98_rgb.hrx new file mode 100644 index 000000000..4958138a0 --- /dev/null +++ b/spec/core_functions/color/to_space/srgb/a98_rgb.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0 0 0), a98-rgb)} + +<===> black/output.css +a { + b: color(a98-rgb 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 1 1 1), a98-rgb)} + +<===> white/output.css +a { + b: color(a98-rgb 1 1 1); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0.5 0.5 0.5), a98-rgb)} + +<===> gray/output.css +a { + b: color(a98-rgb 0.4961036984 0.4961036984 0.4961036984); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0.2 0.4 0.8), a98-rgb)} + +<===> middle/output.css +a { + b: color(a98-rgb 0.2814316253 0.3994051501 0.7833135189); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb -1 0.4 2), a98-rgb)} + +<===> out_of_range/near/output.css +a { + b: color(a98-rgb -0.8376211647 0.3994051501 2.0319913216); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb -999999 0 0), a98-rgb)} + +<===> out_of_range/far/output.css +a { + b: color(a98-rgb -2858844.9973722333 0 0); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0.1 0.2 0.3 / 0.4), a98-rgb)} + +<===> alpha/partial/output.css +a { + b: color(a98-rgb 0.1551137687 0.2123166098 0.3014984164 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0.1 0.2 0.3 / 0.0), a98-rgb)} + +<===> alpha/transparent/output.css +a { + b: color(a98-rgb 0.1551137687 0.2123166098 0.3014984164 / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb none 0.2 0.3), a98-rgb)} + +<===> missing/red/output.css +a { + b: color(a98-rgb none 0.2123166098 0.3014984164); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0.1 none 0.3), a98-rgb)} + +<===> missing/green/output.css +a { + b: color(a98-rgb 0.1058822156 none 0.2988751674); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0.1 0.2 none), a98-rgb)} + +<===> missing/blue/output.css +a { + b: color(a98-rgb 0.1551137687 0.2123166098 none); +} diff --git a/spec/core_functions/color/to_space/srgb/display_p3.hrx b/spec/core_functions/color/to_space/srgb/display_p3.hrx new file mode 100644 index 000000000..ce8e45e67 --- /dev/null +++ b/spec/core_functions/color/to_space/srgb/display_p3.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0 0 0), display-p3)} + +<===> black/output.css +a { + b: color(display-p3 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 1 1 1), display-p3)} + +<===> white/output.css +a { + b: color(display-p3 1 1 1); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0.5 0.5 0.5), display-p3)} + +<===> gray/output.css +a { + b: color(display-p3 0.5 0.5 0.5); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0.2 0.4 0.8), display-p3)} + +<===> middle/output.css +a { + b: color(display-p3 0.2498513331 0.3952400722 0.77356175); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb -1 0.4 2), display-p3)} + +<===> out_of_range/near/output.css +a { + b: color(display-p3 -0.9057671336 0.3411005959 1.9199196788); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb -999999 0 0), display-p3)} + +<===> out_of_range/far/output.css +a { + b: color(display-p3 -921788.227771966 -241977.733146743 -183469.5263235596); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0.1 0.2 0.3 / 0.4), display-p3)} + +<===> alpha/partial/output.css +a { + b: color(display-p3 0.1237968384 0.1975241128 0.2918191239 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0.1 0.2 0.3 / 0.0), display-p3)} + +<===> alpha/transparent/output.css +a { + b: color(display-p3 0.1237968384 0.1975241128 0.2918191239 / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb none 0.2 0.3), display-p3)} + +<===> missing/red/output.css +a { + b: color(display-p3 none 0.196438359 0.2914615969); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0.1 none 0.3), display-p3)} + +<===> missing/green/output.css +a { + b: color(display-p3 0.0878773188 none 0.2867666162); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0.1 0.2 none), display-p3)} + +<===> missing/blue/output.css +a { + b: color(display-p3 0.1237968384 0.1975241128 none); +} diff --git a/spec/core_functions/color/to_space/srgb/hsl.hrx b/spec/core_functions/color/to_space/srgb/hsl.hrx new file mode 100644 index 000000000..f9aef4686 --- /dev/null +++ b/spec/core_functions/color/to_space/srgb/hsl.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0 0 0), hsl)} + +<===> black/output.css +a { + b: hsl(0, 0%, 0%); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 1 1 1), hsl)} + +<===> white/output.css +a { + b: hsl(0, 0%, 100%); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0.5 0.5 0.5), hsl)} + +<===> gray/output.css +a { + b: hsl(0, 0%, 50%); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0.2 0.4 0.8), hsl)} + +<===> middle/output.css +a { + b: hsl(220, 60%, 50%); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb -1 0.4 2), hsl)} + +<===> out_of_range/near/output.css +a { + b: hsl(212, 300%, 50%); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb -999999 0 0), hsl)} + +<===> out_of_range/far/output.css +a { + b: hsl(0, 100%, -49999950%); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0.1 0.2 0.3 / 0.4), hsl)} + +<===> alpha/partial/output.css +a { + b: hsla(210, 50%, 20%, 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0.1 0.2 0.3 / 0.0), hsl)} + +<===> alpha/transparent/output.css +a { + b: hsla(210, 50%, 20%, 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb none 0.2 0.3), hsl)} + +<===> missing/red/output.css +a { + b: hsl(200, 100%, 15%); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0.1 none 0.3), hsl)} + +<===> missing/green/output.css +a { + b: hsl(260, 100%, 15%); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0.1 0.2 none), hsl)} + +<===> missing/blue/output.css +a { + b: hsl(90, 100%, 10%); +} diff --git a/spec/core_functions/color/to_space/srgb/hwb.hrx b/spec/core_functions/color/to_space/srgb/hwb.hrx new file mode 100644 index 000000000..4d9059a29 --- /dev/null +++ b/spec/core_functions/color/to_space/srgb/hwb.hrx @@ -0,0 +1,149 @@ +<===> black/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(color(srgb 0 0 0), hwb)); + +<===> black/output.css +a { + value: black; + space: hwb; + channels: 0deg 0% 100% / 1; +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(color(srgb 1 1 1), hwb)); + +<===> white/output.css +a { + value: white; + space: hwb; + channels: 0deg 100% 0% / 1; +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(color(srgb 0.5 0.5 0.5), hwb)); + +<===> gray/output.css +a { + value: hsl(0, 0%, 50%); + space: hwb; + channels: 0deg 50% 50% / 1; +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(color(srgb 0.2 0.4 0.8), hwb)); + +<===> middle/output.css +a { + value: #3366cc; + space: hwb; + channels: 220deg 20% 20% / 1; +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(color(srgb -1 0.4 2), hwb)); + +<===> out_of_range/near/output.css +a { + value: hsl(212, 300%, 50%); + space: hwb; + channels: 212deg -100% -100% / 1; +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(color(srgb -999999 0 0), hwb)); + +<===> out_of_range/far/output.css +a { + value: hsl(0, 100%, -49999950%); + space: hwb; + channels: 180deg -99999900% 100% / 1; +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(color(srgb 0.1 0.2 0.3 / 0.4), hwb)); + +<===> alpha/partial/output.css +a { + value: hsla(210, 50%, 20%, 0.4); + space: hwb; + channels: 210deg 10% 70% / 0.4; +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(color(srgb 0.1 0.2 0.3 / 0.0), hwb)); + +<===> alpha/transparent/output.css +a { + value: hsla(210, 50%, 20%, 0); + space: hwb; + channels: 210deg 10% 70% / 0; +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(color(srgb none 0.2 0.3), hwb)); + +<===> missing/red/output.css +a { + value: hsl(200, 100%, 15%); + space: hwb; + channels: 200deg 0% 70% / 1; +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(color(srgb 0.1 none 0.3), hwb)); + +<===> missing/green/output.css +a { + value: hsl(260, 100%, 15%); + space: hwb; + channels: 260deg 0% 70% / 1; +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +a {b: color.to-space(color(srgb 0.1 0.2 none), hwb)} + +<===> missing/blue/output.css +a { + b: hsl(90, 100%, 10%); +} diff --git a/spec/core_functions/color/to_space/srgb/lab.hrx b/spec/core_functions/color/to_space/srgb/lab.hrx new file mode 100644 index 000000000..1de6dc21d --- /dev/null +++ b/spec/core_functions/color/to_space/srgb/lab.hrx @@ -0,0 +1,117 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0 0 0), lab)} + +<===> black/output.css +a { + b: lab(0% 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 1 1 1), lab)} + +<===> white/output.css +a { + b: lab(100% 0 0); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0.5 0.5 0.5), lab)} + +<===> gray/output.css +a { + b: lab(53.3889647411% 0 0); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0.2 0.4 0.8), lab)} + +<===> middle/output.css +a { + b: lab(44.1210142293% 10.9543336098 -59.0857381981); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb -1 0.4 2), lab)} + +<===> out_of_range/near/output.css +a { + b: lab(48.6432537296% 68.9299544627 -213.4229545471); +} + +<===> +================================================================================ +<===> out_of_range/far/options.yml +:todo: + - dart-sass # w3c/csswg-drafts#9484 + +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb -999999 0 0), lab)} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0.1 0.2 0.3 / 0.4), lab)} + +<===> alpha/partial/output.css +a { + b: lab(20.2042266123% -3.1075752886 -18.9913351297 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0.1 0.2 0.3 / 0.0), lab)} + +<===> alpha/transparent/output.css +a { + b: lab(20.2042266123% -3.1075752886 -18.9913351297 / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb none 0.2 0.3), lab)} + +<===> missing/red/output.css +a { + b: lab(19.2964565453% -7.7361660103 -20.488348653); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0.1 none 0.3), lab)} + +<===> missing/green/output.css +a { + b: lab(6.0247531381% 29.4610612512 -41.8404017236); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0.1 0.2 none), lab)} + +<===> missing/blue/output.css +a { + b: lab(18.3483752329% -17.6137840535 25.305473968); +} diff --git a/spec/core_functions/color/to_space/srgb/lch.hrx b/spec/core_functions/color/to_space/srgb/lch.hrx new file mode 100644 index 000000000..a1456aeb4 --- /dev/null +++ b/spec/core_functions/color/to_space/srgb/lch.hrx @@ -0,0 +1,117 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0 0 0), lch)} + +<===> black/output.css +a { + b: lch(0% 0 none); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 1 1 1), lch)} + +<===> white/output.css +a { + b: lch(100% 0 none); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0.5 0.5 0.5), lch)} + +<===> gray/output.css +a { + b: lch(53.3889647411% 0 none); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0.2 0.4 0.8), lch)} + +<===> middle/output.css +a { + b: lch(44.1210142293% 60.0926108873 280.5032243387deg); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb -1 0.4 2), lch)} + +<===> out_of_range/near/output.css +a { + b: lch(48.6432537296% 224.278166904 287.899080689deg); +} + +<===> +================================================================================ +<===> out_of_range/far/options.yml +:todo: + - dart-sass # w3c/csswg-drafts#9484 + +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb -999999 0 0), lch)} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0.1 0.2 0.3 / 0.4), lch)} + +<===> alpha/partial/output.css +a { + b: lch(20.2042266123% 19.2439038187 260.7069785652deg / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0.1 0.2 0.3 / 0.0), lch)} + +<===> alpha/transparent/output.css +a { + b: lch(20.2042266123% 19.2439038187 260.7069785652deg / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb none 0.2 0.3), lch)} + +<===> missing/red/output.css +a { + b: lch(19.2964565453% 21.9002441782 249.3140373711deg); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0.1 none 0.3), lch)} + +<===> missing/green/output.css +a { + b: lch(6.0247531381% 51.1719976788 305.1505063293deg); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0.1 0.2 none), lch)} + +<===> missing/blue/output.css +a { + b: lch(18.3483752329% 30.8320028773 124.8397077198deg); +} diff --git a/spec/core_functions/color/to_space/srgb/oklab.hrx b/spec/core_functions/color/to_space/srgb/oklab.hrx new file mode 100644 index 000000000..8662d047c --- /dev/null +++ b/spec/core_functions/color/to_space/srgb/oklab.hrx @@ -0,0 +1,117 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0 0 0), oklab)} + +<===> black/output.css +a { + b: oklab(0% 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 1 1 1), oklab)} + +<===> white/output.css +a { + b: oklab(99.9999993474% 0.0000000001 0.0000000373); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0.5 0.5 0.5), oklab)} + +<===> gray/output.css +a { + b: oklab(59.8180726623% 0 0.0000000223); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0.2 0.4 0.8), oklab)} + +<===> middle/output.css +a { + b: oklab(53.248255955% -0.0225118457 -0.1663491641); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb -1 0.4 2), oklab)} + +<===> out_of_range/near/output.css +a { + b: oklab(49.0997083563% -2.0235857478 -0.6049594977); +} + +<===> +================================================================================ +<===> out_of_range/far/options.yml +:todo: + - dart-sass # w3c/csswg-drafts#9484 + +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb -999999 0 0), oklab)} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0.1 0.2 0.3 / 0.4), oklab)} + +<===> alpha/partial/output.css +a { + b: oklab(31.3834098842% -0.0190902788 -0.0525285242 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0.1 0.2 0.3 / 0.0), oklab)} + +<===> alpha/transparent/output.css +a { + b: oklab(31.3834098842% -0.0190902788 -0.0525285242 / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb none 0.2 0.3), oklab)} + +<===> missing/red/output.css +a { + b: oklab(30.4674630654% -0.0359109243 -0.0568929135); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0.1 none 0.3), oklab)} + +<===> missing/green/output.css +a { + b: oklab(21.1364004026% 0.0335334923 -0.1181436252); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0.1 0.2 none), oklab)} + +<===> missing/blue/output.css +a { + b: oklab(28.8978411941% -0.0558272225 0.0596397714); +} diff --git a/spec/core_functions/color/to_space/srgb/oklch.hrx b/spec/core_functions/color/to_space/srgb/oklch.hrx new file mode 100644 index 000000000..0804b9dbd --- /dev/null +++ b/spec/core_functions/color/to_space/srgb/oklch.hrx @@ -0,0 +1,117 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0 0 0), oklch)} + +<===> black/output.css +a { + b: oklch(0% 0 none); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 1 1 1), oklch)} + +<===> white/output.css +a { + b: oklch(99.9999993474% 0.0000000373 89.8755630959deg); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0.5 0.5 0.5), oklch)} + +<===> gray/output.css +a { + b: oklch(59.8180726623% 0.0000000223 89.8755628286deg); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0.2 0.4 0.8), oklch)} + +<===> middle/output.css +a { + b: oklch(53.248255955% 0.1678655044 262.2930469968deg); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb -1 0.4 2), oklch)} + +<===> out_of_range/near/output.css +a { + b: oklch(49.0997083563% 2.1120784248 196.6442570354deg); +} + +<===> +================================================================================ +<===> out_of_range/far/options.yml +:todo: + - dart-sass # w3c/csswg-drafts#9484 + +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb -999999 0 0), oklch)} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0.1 0.2 0.3 / 0.4), oklch)} + +<===> alpha/partial/output.css +a { + b: oklch(31.3834098842% 0.0558899329 250.0274938863deg / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0.1 0.2 0.3 / 0.0), oklch)} + +<===> alpha/transparent/output.css +a { + b: oklch(31.3834098842% 0.0558899329 250.0274938863deg / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb none 0.2 0.3), oklch)} + +<===> missing/red/output.css +a { + b: oklch(30.4674630654% 0.0672785114 237.7397947754deg); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0.1 none 0.3), oklch)} + +<===> missing/green/output.css +a { + b: oklch(21.1364004026% 0.1228104689 285.8458860201deg); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0.1 0.2 none), oklch)} + +<===> missing/blue/output.css +a { + b: oklch(28.8978411941% 0.0816919892 133.1088653771deg); +} diff --git a/spec/core_functions/color/to_space/srgb/prophoto_rgb.hrx b/spec/core_functions/color/to_space/srgb/prophoto_rgb.hrx new file mode 100644 index 000000000..c639affac --- /dev/null +++ b/spec/core_functions/color/to_space/srgb/prophoto_rgb.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0 0 0), prophoto-rgb)} + +<===> black/output.css +a { + b: color(prophoto-rgb 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 1 1 1), prophoto-rgb)} + +<===> white/output.css +a { + b: color(prophoto-rgb 1 1 1); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0.5 0.5 0.5), prophoto-rgb)} + +<===> gray/output.css +a { + b: color(prophoto-rgb 0.4246723949 0.4246723949 0.4246723949); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0.2 0.4 0.8), prophoto-rgb)} + +<===> middle/output.css +a { + b: color(prophoto-rgb 0.3437112182 0.3305199405 0.7092276973); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb -1 0.4 2), prophoto-rgb)} + +<===> out_of_range/near/output.css +a { + b: color(prophoto-rgb 0.4212484437 0.3577643231 2.2446463591); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb -999999 0 0), prophoto-rgb)} + +<===> out_of_range/far/output.css +a { + b: color(prophoto-rgb -65386295.193253286 -25672329.57753762 -9641319.650744053); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0.1 0.2 0.3 / 0.4), prophoto-rgb)} + +<===> alpha/partial/output.css +a { + b: color(prophoto-rgb 0.1331358788 0.1476592872 0.2235807496 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0.1 0.2 0.3 / 0.0), prophoto-rgb)} + +<===> alpha/transparent/output.css +a { + b: color(prophoto-rgb 0.1331358788 0.1476592872 0.2235807496 / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb none 0.2 0.3), prophoto-rgb)} + +<===> missing/red/output.css +a { + b: color(prophoto-rgb none 0.1451114907 0.2232691012); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0.1 none 0.3), prophoto-rgb)} + +<===> missing/green/output.css +a { + b: color(prophoto-rgb 0.0991241424 none 0.2163131073); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0.1 0.2 none), prophoto-rgb)} + +<===> missing/blue/output.css +a { + b: color(prophoto-rgb 0.1013444503 0.1422873785 none); +} diff --git a/spec/core_functions/color/to_space/srgb/rec2020.hrx b/spec/core_functions/color/to_space/srgb/rec2020.hrx new file mode 100644 index 000000000..b0c43d329 --- /dev/null +++ b/spec/core_functions/color/to_space/srgb/rec2020.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0 0 0), rec2020)} + +<===> black/output.css +a { + b: color(rec2020 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 1 1 1), rec2020)} + +<===> white/output.css +a { + b: color(rec2020 1 1 1); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0.5 0.5 0.5), rec2020)} + +<===> gray/output.css +a { + b: color(rec2020 0.4500400319 0.4500400319 0.4500400319); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0.2 0.4 0.8), rec2020)} + +<===> middle/output.css +a { + b: color(rec2020 0.2739398263 0.3416365439 0.7427746502); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb -1 0.4 2), rec2020)} + +<===> out_of_range/near/output.css +a { + b: color(rec2020 -0.6026796755 0.3067863382 2.048941054); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb -999999 0 0), rec2020)} + +<===> out_of_range/far/output.css +a { + b: color(rec2020 -2540376.5945026004 -941367.6801989076 -492696.4947353633); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0.1 0.2 0.3 / 0.4), rec2020)} + +<===> alpha/partial/output.css +a { + b: color(rec2020 0.0912836575 0.1341693654 0.2300559367 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0.1 0.2 0.3 / 0.0), rec2020)} + +<===> alpha/transparent/output.css +a { + b: color(rec2020 0.0912836575 0.1341693654 0.2300559367 / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb none 0.2 0.3), rec2020)} + +<===> missing/red/output.css +a { + b: color(rec2020 none 0.1318794997 0.2297011255); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0.1 none 0.3), rec2020)} + +<===> missing/green/output.css +a { + b: color(rec2020 0.0425725358 none 0.2236924669); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0.1 0.2 none), rec2020)} + +<===> missing/blue/output.css +a { + b: color(rec2020 0.0773513907 0.1314145084 none); +} diff --git a/spec/core_functions/color/to_space/srgb/rgb.hrx b/spec/core_functions/color/to_space/srgb/rgb.hrx new file mode 100644 index 000000000..959896e9e --- /dev/null +++ b/spec/core_functions/color/to_space/srgb/rgb.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0 0 0), rgb)} + +<===> black/output.css +a { + b: black; +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 1 1 1), rgb)} + +<===> white/output.css +a { + b: white; +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0.5 0.5 0.5), rgb)} + +<===> gray/output.css +a { + b: rgb(127.5, 127.5, 127.5); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0.2 0.4 0.8), rgb)} + +<===> middle/output.css +a { + b: #3366cc; +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb -1 0.4 2), rgb)} + +<===> out_of_range/near/output.css +a { + b: hsl(212, 300%, 50%); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb -999999 0 0), rgb)} + +<===> out_of_range/far/output.css +a { + b: hsl(0, 100%, -49999950%); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0.1 0.2 0.3 / 0.4), rgb)} + +<===> alpha/partial/output.css +a { + b: rgba(25.5, 51, 76.5, 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0.1 0.2 0.3 / 0.0), rgb)} + +<===> alpha/transparent/output.css +a { + b: rgba(25.5, 51, 76.5, 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb none 0.2 0.3), rgb)} + +<===> missing/red/output.css +a { + b: rgb(0, 51, 76.5); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0.1 none 0.3), rgb)} + +<===> missing/green/output.css +a { + b: rgb(25.5, 0, 76.5); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0.1 0.2 none), rgb)} + +<===> missing/blue/output.css +a { + b: rgb(25.5, 51, 0); +} diff --git a/spec/core_functions/color/to_space/srgb/srgb.hrx b/spec/core_functions/color/to_space/srgb/srgb.hrx new file mode 100644 index 000000000..ef52d15fc --- /dev/null +++ b/spec/core_functions/color/to_space/srgb/srgb.hrx @@ -0,0 +1,52 @@ +<===> in_range/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0.2 0.4 0.8), srgb)} + +<===> in_range/output.css +a { + b: color(srgb 0.2 0.4 0.8); +} + +<===> +================================================================================ +<===> out_of_range/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb -1 0.4 2), srgb)} + +<===> out_of_range/output.css +a { + b: color(srgb -1 0.4 2); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb none 0.2 0.3), srgb)} + +<===> missing/red/output.css +a { + b: color(srgb none 0.2 0.3); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0.1 none 0.3), srgb)} + +<===> missing/green/output.css +a { + b: color(srgb 0.1 none 0.3); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0.1 0.2 none), srgb)} + +<===> missing/blue/output.css +a { + b: color(srgb 0.1 0.2 none); +} diff --git a/spec/core_functions/color/to_space/srgb/srgb_linear.hrx b/spec/core_functions/color/to_space/srgb/srgb_linear.hrx new file mode 100644 index 000000000..f61fc54e4 --- /dev/null +++ b/spec/core_functions/color/to_space/srgb/srgb_linear.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0 0 0), srgb-linear)} + +<===> black/output.css +a { + b: color(srgb-linear 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 1 1 1), srgb-linear)} + +<===> white/output.css +a { + b: color(srgb-linear 1 1 1); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0.5 0.5 0.5), srgb-linear)} + +<===> gray/output.css +a { + b: color(srgb-linear 0.2140411405 0.2140411405 0.2140411405); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0.2 0.4 0.8), srgb-linear)} + +<===> middle/output.css +a { + b: color(srgb-linear 0.0331047666 0.1328683216 0.6038273389); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb -1 0.4 2), srgb-linear)} + +<===> out_of_range/near/output.css +a { + b: color(srgb-linear -1 0.1328683216 4.9538457516); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb -999999 0 0), srgb-linear)} + +<===> out_of_range/far/output.css +a { + b: color(srgb-linear -220898675516573.56 0 0); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0.1 0.2 0.3 / 0.4), srgb-linear)} + +<===> alpha/partial/output.css +a { + b: color(srgb-linear 0.0100228256 0.0331047666 0.0732389559 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0.1 0.2 0.3 / 0.0), srgb-linear)} + +<===> alpha/transparent/output.css +a { + b: color(srgb-linear 0.0100228256 0.0331047666 0.0732389559 / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb none 0.2 0.3), srgb-linear)} + +<===> missing/red/output.css +a { + b: color(srgb-linear none 0.0331047666 0.0732389559); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0.1 none 0.3), srgb-linear)} + +<===> missing/green/output.css +a { + b: color(srgb-linear 0.0100228256 none 0.0732389559); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0.1 0.2 none), srgb-linear)} + +<===> missing/blue/output.css +a { + b: color(srgb-linear 0.0100228256 0.0331047666 none); +} diff --git a/spec/core_functions/color/to_space/srgb/xyz.hrx b/spec/core_functions/color/to_space/srgb/xyz.hrx new file mode 100644 index 000000000..334491ba3 --- /dev/null +++ b/spec/core_functions/color/to_space/srgb/xyz.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0 0 0), xyz)} + +<===> black/output.css +a { + b: color(xyz 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 1 1 1), xyz)} + +<===> white/output.css +a { + b: color(xyz 0.9504559271 1 1.0890577508); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0.5 0.5 0.5), xyz)} + +<===> gray/output.css +a { + b: color(xyz 0.2034366706 0.2140411405 0.233103163); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0.2 0.4 0.8), xyz)} + +<===> middle/output.css +a { + b: color(xyz 0.1701429663 0.1456543203 0.5904344526); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb -1 0.4 2), xyz)} + +<===> out_of_range/near/output.css +a { + b: color(xyz 0.5291948186 0.2400138509 4.7052960558); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb -999999 0 0), xyz)} + +<===> out_of_range/far/output.css +a { + b: color(xyz -91096581353071.61 -46971674760177.55 -4270152250925.2314); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0.1 0.2 0.3 / 0.4), xyz)} + +<===> alpha/partial/output.css +a { + b: color(xyz 0.0291892916 0.0310940256 0.0737556471 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0.1 0.2 0.3 / 0.0), xyz)} + +<===> alpha/transparent/output.css +a { + b: color(xyz 0.0291892916 0.0310940256 0.0737556471 / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb none 0.2 0.3), xyz)} + +<===> missing/red/output.css +a { + b: color(xyz none 0.028962782 0.0735618977); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0.1 none 0.3), xyz)} + +<===> missing/green/output.css +a { + b: color(xyz 0.0173515455 none 0.0698097318); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0.1 0.2 none), xyz)} + +<===> missing/blue/output.css +a { + b: color(xyz 0.0159710671 0.0258067358 none); +} diff --git a/spec/core_functions/color/to_space/srgb/xyz_d50.hrx b/spec/core_functions/color/to_space/srgb/xyz_d50.hrx new file mode 100644 index 000000000..f4e73ba99 --- /dev/null +++ b/spec/core_functions/color/to_space/srgb/xyz_d50.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0 0 0), xyz-d50)} + +<===> black/output.css +a { + b: color(xyz-d50 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 1 1 1), xyz-d50)} + +<===> white/output.css +a { + b: color(xyz-d50 0.9642956764 1 0.8251046025); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0.5 0.5 0.5), xyz-d50)} + +<===> gray/output.css +a { + b: color(xyz-d50 0.2063989463 0.2140411405 0.1766063301); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0.2 0.4 0.8), xyz-d50)} + +<===> middle/output.css +a { + b: color(xyz-d50 0.152004951 0.1392210573 0.4445526951); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb -1 0.4 2), xyz-d50)} + +<===> out_of_range/near/output.css +a { + b: color(xyz-d50 0.3238971106 0.1730595843 3.5365131761); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb -999999 0 0), xyz-d50)} + +<===> out_of_range/far/output.css +a { + b: color(xyz-d50 -96326345922671.53 -49148448135198.27 -3075775809210.909); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0.1 0.2 0.3 / 0.4), xyz-d50)} + +<===> alpha/partial/output.css +a { + b: color(xyz-d50 0.0275998758 0.0304021191 0.0556533029 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0.1 0.2 0.3 / 0.0), xyz-d50)} + +<===> alpha/transparent/output.css +a { + b: color(xyz-d50 0.0275998758 0.0304021191 0.0556533029 / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb none 0.2 0.3), xyz-d50)} + +<===> missing/red/output.css +a { + b: color(xyz-d50 none 0.0281721088 0.0555137459); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0.1 none 0.3), xyz-d50)} + +<===> missing/green/output.css +a { + b: color(xyz-d50 0.014849525 none 0.0524394483); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb 0.1 0.2 none), xyz-d50)} + +<===> missing/blue/output.css +a { + b: color(xyz-d50 0.0171209617 0.0259623875 none); +} diff --git a/spec/core_functions/color/to_space/srgb_linear/a98_rgb.hrx b/spec/core_functions/color/to_space/srgb_linear/a98_rgb.hrx new file mode 100644 index 000000000..5ed2f6ac6 --- /dev/null +++ b/spec/core_functions/color/to_space/srgb_linear/a98_rgb.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0 0 0), a98-rgb)} + +<===> black/output.css +a { + b: color(a98-rgb 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 1 1 1), a98-rgb)} + +<===> white/output.css +a { + b: color(a98-rgb 1 1 1); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0.5 0.5 0.5), a98-rgb)} + +<===> gray/output.css +a { + b: color(a98-rgb 0.7296583818 0.7296583818 0.7296583818); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0.2 0.4 0.8), a98-rgb)} + +<===> middle/output.css +a { + b: color(a98-rgb 0.5391048013 0.6592557425 0.8950095649); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear -1 0.4 2), a98-rgb)} + +<===> out_of_range/near/output.css +a { + b: color(a98-rgb -0.7934333717 0.6592557425 1.3497959658); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear -999999 0 0), a98-rgb)} + +<===> out_of_range/far/output.css +a { + b: color(a98-rgb -459.2276214951 0 0); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0.1 0.2 0.3 / 0.4), a98-rgb)} + +<===> alpha/partial/output.css +a { + b: color(a98-rgb 0.3933623369 0.4810314783 0.5747978617 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0.1 0.2 0.3 / 0.0), a98-rgb)} + +<===> alpha/transparent/output.css +a { + b: color(a98-rgb 0.3933623369 0.4810314783 0.5747978617 / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear none 0.2 0.3), a98-rgb)} + +<===> missing/red/output.css +a { + b: color(a98-rgb none 0.4810314783 0.5747978617); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0.1 none 0.3), a98-rgb)} + +<===> missing/green/output.css +a { + b: color(a98-rgb 0.3013559074 none 0.5674699335); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0.1 0.2 none), a98-rgb)} + +<===> missing/blue/output.css +a { + b: color(a98-rgb 0.3933623369 0.4810314783 none); +} diff --git a/spec/core_functions/color/to_space/srgb_linear/display_p3.hrx b/spec/core_functions/color/to_space/srgb_linear/display_p3.hrx new file mode 100644 index 000000000..215a92268 --- /dev/null +++ b/spec/core_functions/color/to_space/srgb_linear/display_p3.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0 0 0), display-p3)} + +<===> black/output.css +a { + b: color(display-p3 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 1 1 1), display-p3)} + +<===> white/output.css +a { + b: color(display-p3 1 1 1); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0.5 0.5 0.5), display-p3)} + +<===> gray/output.css +a { + b: color(display-p3 0.7353569831 0.7353569831 0.7353569831); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0.2 0.4 0.8), display-p3)} + +<===> middle/output.css +a { + b: color(display-p3 0.5225476892 0.6601803521 0.8864121553); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear -1 0.4 2), display-p3)} + +<===> out_of_range/near/output.css +a { + b: color(display-p3 -0.8815767709 0.6290624928 1.3029857539); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear -999999 0 0), display-p3)} + +<===> out_of_range/far/output.css +a { + b: color(display-p3 -307.4724395956 -80.6737432685 -61.1542078437); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0.1 0.2 0.3 / 0.4), display-p3)} + +<===> alpha/partial/output.css +a { + b: color(display-p3 0.377671895 0.4807798914 0.5742767089 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0.1 0.2 0.3 / 0.0), display-p3)} + +<===> alpha/transparent/output.css +a { + b: color(display-p3 0.377671895 0.4807798914 0.5742767089 / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear none 0.2 0.3), display-p3)} + +<===> missing/red/output.css +a { + b: color(display-p3 none 0.4769934816 0.5727260345); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0.1 none 0.3), display-p3)} + +<===> missing/green/output.css +a { + b: color(display-p3 0.3175781541 none 0.5609588905); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0.1 0.2 none), display-p3)} + +<===> missing/blue/output.css +a { + b: color(display-p3 0.377671895 0.4807798914 none); +} diff --git a/spec/core_functions/color/to_space/srgb_linear/hsl.hrx b/spec/core_functions/color/to_space/srgb_linear/hsl.hrx new file mode 100644 index 000000000..8efecba61 --- /dev/null +++ b/spec/core_functions/color/to_space/srgb_linear/hsl.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0 0 0), hsl)} + +<===> black/output.css +a { + b: hsl(0, 0%, 0%); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 1 1 1), hsl)} + +<===> white/output.css +a { + b: hsl(0, 0%, 100%); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0.5 0.5 0.5), hsl)} + +<===> gray/output.css +a { + b: hsl(0, 0%, 73.5356983052%); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0.2 0.4 0.8), hsl)} + +<===> middle/output.css +a { + b: hsl(214.3023060477, 69.2456926348%, 69.5430478913%); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear -1 0.4 2), hsl)} + +<===> out_of_range/near/output.css +a { + b: hsl(197.5434618594, 666.1615765111%, 17.6628023075%); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear -999999 0 0), hsl)} + +<===> out_of_range/far/output.css +a { + b: hsl(0, 100%, -16678.2577069634%); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0.1 0.2 0.3 / 0.4), hsl)} + +<===> alpha/partial/output.css +a { + b: hsla(205.3925362149, 25.148533711%, 46.6510851344%, 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0.1 0.2 0.3 / 0.0), hsl)} + +<===> alpha/transparent/output.css +a { + b: hsla(205.3925362149, 25.148533711%, 46.6510851344%, 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear none 0.2 0.3), hsl)} + +<===> missing/red/output.css +a { + b: hsl(190.2052342776, 100%, 29.191574503%); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0.1 none 0.3), hsl)} + +<===> missing/green/output.css +a { + b: hsl(275.8860614996, 100%, 29.191574503%); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0.1 0.2 none), hsl)} + +<===> missing/blue/output.css +a { + b: hsl(76.7592364631, 100%, 24.2264602241%); +} diff --git a/spec/core_functions/color/to_space/srgb_linear/hwb.hrx b/spec/core_functions/color/to_space/srgb_linear/hwb.hrx new file mode 100644 index 000000000..47d57d4a7 --- /dev/null +++ b/spec/core_functions/color/to_space/srgb_linear/hwb.hrx @@ -0,0 +1,149 @@ +<===> black/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(color(srgb-linear 0 0 0), hwb)); + +<===> black/output.css +a { + value: black; + space: hwb; + channels: 0deg 0% 100% / 1; +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(color(srgb-linear 1 1 1), hwb)); + +<===> white/output.css +a { + value: white; + space: hwb; + channels: 0deg 100% 0% / 1; +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(color(srgb-linear 0.5 0.5 0.5), hwb)); + +<===> gray/output.css +a { + value: hsl(0, 0%, 73.5356983052%); + space: hwb; + channels: 0deg 73.5356983052% 26.4643016948% / 1; +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(color(srgb-linear 0.2 0.4 0.8), hwb)); + +<===> middle/output.css +a { + value: hsl(214.3023060477, 69.2456926348%, 69.5430478913%); + space: hwb; + channels: 214.3023060477deg 48.4529204482% 9.3668246656% / 1; +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(color(srgb-linear -1 0.4 2), hwb)); + +<===> out_of_range/near/output.css +a { + value: hsl(197.5434618594, 666.1615765111%, 17.6628023075%); + space: hwb; + channels: 197.5434618594deg -100% -35.3256046149% / 1; +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(color(srgb-linear -999999 0 0), hwb)); + +<===> out_of_range/far/output.css +a { + value: hsl(0, 100%, -16678.2577069634%); + space: hwb; + channels: 180deg -33356.5154139268% 100% / 1; +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(color(srgb-linear 0.1 0.2 0.3 / 0.4), hwb)); + +<===> alpha/partial/output.css +a { + value: hsla(205.3925362149, 25.148533711%, 46.6510851344%, 0.4); + space: hwb; + channels: 205.3925362149deg 34.9190212628% 41.616850994% / 0.4; +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(color(srgb-linear 0.1 0.2 0.3 / 0.0), hwb)); + +<===> alpha/transparent/output.css +a { + value: hsla(205.3925362149, 25.148533711%, 46.6510851344%, 0); + space: hwb; + channels: 205.3925362149deg 34.9190212628% 41.616850994% / 0; +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(color(srgb-linear none 0.2 0.3), hwb)); + +<===> missing/red/output.css +a { + value: hsl(190.2052342776, 100%, 29.191574503%); + space: hwb; + channels: 190.2052342776deg 0% 41.616850994% / 1; +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(color(srgb-linear 0.1 none 0.3), hwb)); + +<===> missing/green/output.css +a { + value: hsl(275.8860614996, 100%, 29.191574503%); + space: hwb; + channels: 275.8860614996deg 0% 41.616850994% / 1; +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +a {b: color.to-space(color(srgb-linear 0.1 0.2 none), hwb)} + +<===> missing/blue/output.css +a { + b: hsl(76.7592364631, 100%, 24.2264602241%); +} diff --git a/spec/core_functions/color/to_space/srgb_linear/lab.hrx b/spec/core_functions/color/to_space/srgb_linear/lab.hrx new file mode 100644 index 000000000..b9348c4bf --- /dev/null +++ b/spec/core_functions/color/to_space/srgb_linear/lab.hrx @@ -0,0 +1,117 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0 0 0), lab)} + +<===> black/output.css +a { + b: lab(0% 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 1 1 1), lab)} + +<===> white/output.css +a { + b: lab(100% 0 0); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0.5 0.5 0.5), lab)} + +<===> gray/output.css +a { + b: lab(76.0692610142% 0 0); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0.2 0.4 0.8), lab)} + +<===> middle/output.css +a { + b: lab(68.0021326658% -3.4788867492 -36.298343272); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear -1 0.4 2), lab)} + +<===> out_of_range/near/output.css +a { + b: lab(50.1566645274% -199.4292910489 -127.4603757066); +} + +<===> +================================================================================ +<===> out_of_range/far/options.yml +:todo: + - dart-sass # w3c/csswg-drafts#9484 + +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear -999999 0 0), lab)} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0.1 0.2 0.3 / 0.4), lab)} + +<===> alpha/partial/output.css +a { + b: lab(49.9553149355% -7.5157058766 -17.8791167699 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0.1 0.2 0.3 / 0.0), lab)} + +<===> alpha/transparent/output.css +a { + b: lab(49.9553149355% -7.5157058766 -17.8791167699 / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear none 0.2 0.3), lab)} + +<===> missing/red/output.css +a { + b: lab(47.1789302985% -22.7267758708 -22.4056108481); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0.1 none 0.3), lab)} + +<===> missing/green/output.css +a { + b: lab(23.8148183096% 52.2336661374 -59.2206654307); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0.1 0.2 none), lab)} + +<===> missing/blue/output.css +a { + b: lab(47.7042083773% -24.5180464109 51.183897624); +} diff --git a/spec/core_functions/color/to_space/srgb_linear/lch.hrx b/spec/core_functions/color/to_space/srgb_linear/lch.hrx new file mode 100644 index 000000000..3aa0bd163 --- /dev/null +++ b/spec/core_functions/color/to_space/srgb_linear/lch.hrx @@ -0,0 +1,117 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0 0 0), lch)} + +<===> black/output.css +a { + b: lch(0% 0 none); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 1 1 1), lch)} + +<===> white/output.css +a { + b: lch(100% 0 none); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0.5 0.5 0.5), lch)} + +<===> gray/output.css +a { + b: lch(76.0692610142% 0 none); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0.2 0.4 0.8), lch)} + +<===> middle/output.css +a { + b: lch(68.0021326658% 36.4646730043 264.5254095776deg); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear -1 0.4 2), lch)} + +<===> out_of_range/near/output.css +a { + b: lch(50.1566645274% 236.6816205445 212.5836894898deg); +} + +<===> +================================================================================ +<===> out_of_range/far/options.yml +:todo: + - dart-sass # w3c/csswg-drafts#9484 + +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear -999999 0 0), lch)} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0.1 0.2 0.3 / 0.4), lch)} + +<===> alpha/partial/output.css +a { + b: lch(49.9553149355% 19.3945521035 247.1999530707deg / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0.1 0.2 0.3 / 0.0), lch)} + +<===> alpha/transparent/output.css +a { + b: lch(49.9553149355% 19.3945521035 247.1999530707deg / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear none 0.2 0.3), lch)} + +<===> missing/red/output.css +a { + b: lch(47.1789302985% 31.9142247118 224.5922863586deg); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0.1 none 0.3), lch)} + +<===> missing/green/output.css +a { + b: lch(23.8148183096% 78.9648218652 311.4128591679deg); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0.1 0.2 none), lch)} + +<===> missing/blue/output.css +a { + b: lch(47.7042083773% 56.7532023396 115.5952944453deg); +} diff --git a/spec/core_functions/color/to_space/srgb_linear/oklab.hrx b/spec/core_functions/color/to_space/srgb_linear/oklab.hrx new file mode 100644 index 000000000..d1952fbb5 --- /dev/null +++ b/spec/core_functions/color/to_space/srgb_linear/oklab.hrx @@ -0,0 +1,117 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0 0 0), oklab)} + +<===> black/output.css +a { + b: oklab(0% 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 1 1 1), oklab)} + +<===> white/output.css +a { + b: oklab(99.9999993474% 0.0000000001 0.0000000373); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0.5 0.5 0.5), oklab)} + +<===> gray/output.css +a { + b: oklab(79.3700520804% 0.0000000001 0.0000000296); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0.2 0.4 0.8), oklab)} + +<===> middle/output.css +a { + b: oklab(72.8143374355% -0.0250833833 -0.0997563344); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear -1 0.4 2), oklab)} + +<===> out_of_range/near/output.css +a { + b: oklab(41.5806830952% -1.9917329546 -0.3816984711); +} + +<===> +================================================================================ +<===> out_of_range/far/options.yml +:todo: + - dart-sass # w3c/csswg-drafts#9484 + +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear -999999 0 0), oklab)} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0.1 0.2 0.3 / 0.4), oklab)} + +<===> alpha/partial/output.css +a { + b: oklab(56.8480554239% -0.0271159546 -0.0484208297 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0.1 0.2 0.3 / 0.0), oklab)} + +<===> alpha/transparent/output.css +a { + b: oklab(56.8480554239% -0.0271159546 -0.0484208297 / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear none 0.2 0.3), oklab)} + +<===> missing/red/output.css +a { + b: oklab(54.0246595647% -0.0760370977 -0.061145727); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0.1 none 0.3), oklab)} + +<===> missing/green/output.css +a { + b: oklab(37.7328569492% 0.1076561145 -0.1664592467); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0.1 0.2 none), oklab)} + +<===> missing/blue/output.css +a { + b: oklab(53.8237207745% -0.0823086169 0.1108579968); +} diff --git a/spec/core_functions/color/to_space/srgb_linear/oklch.hrx b/spec/core_functions/color/to_space/srgb_linear/oklch.hrx new file mode 100644 index 000000000..09b691ad6 --- /dev/null +++ b/spec/core_functions/color/to_space/srgb_linear/oklch.hrx @@ -0,0 +1,117 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0 0 0), oklch)} + +<===> black/output.css +a { + b: oklch(0% 0 none); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 1 1 1), oklch)} + +<===> white/output.css +a { + b: oklch(99.9999993474% 0.0000000373 89.8755630959deg); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0.5 0.5 0.5), oklch)} + +<===> gray/output.css +a { + b: oklch(79.3700520804% 0.0000000296 89.8755628773deg); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0.2 0.4 0.8), oklch)} + +<===> middle/output.css +a { + b: oklch(72.8143374355% 0.1028615689 255.885778774deg); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear -1 0.4 2), oklch)} + +<===> out_of_range/near/output.css +a { + b: oklch(41.5806830952% 2.0279777823 190.8487076701deg); +} + +<===> +================================================================================ +<===> out_of_range/far/options.yml +:todo: + - dart-sass # w3c/csswg-drafts#9484 + +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear -999999 0 0), oklch)} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0.1 0.2 0.3 / 0.4), oklch)} + +<===> alpha/partial/output.css +a { + b: oklch(56.8480554239% 0.055496412 240.7509124531deg / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0.1 0.2 0.3 / 0.0), oklch)} + +<===> alpha/transparent/output.css +a { + b: oklch(56.8480554239% 0.055496412 240.7509124531deg / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear none 0.2 0.3), oklch)} + +<===> missing/red/output.css +a { + b: oklch(54.0246595647% 0.0975727429 218.8047277574deg); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0.1 none 0.3), oklch)} + +<===> missing/green/output.css +a { + b: oklch(37.7328569492% 0.1982385426 302.8924282818deg); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0.1 0.2 none), oklch)} + +<===> missing/blue/output.css +a { + b: oklch(53.8237207745% 0.138073183 126.5927383995deg); +} diff --git a/spec/core_functions/color/to_space/srgb_linear/prophoto_rgb.hrx b/spec/core_functions/color/to_space/srgb_linear/prophoto_rgb.hrx new file mode 100644 index 000000000..083b98d99 --- /dev/null +++ b/spec/core_functions/color/to_space/srgb_linear/prophoto_rgb.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0 0 0), prophoto-rgb)} + +<===> black/output.css +a { + b: color(prophoto-rgb 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 1 1 1), prophoto-rgb)} + +<===> white/output.css +a { + b: color(prophoto-rgb 1 1 1); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0.5 0.5 0.5), prophoto-rgb)} + +<===> gray/output.css +a { + b: color(prophoto-rgb 0.6803950001 0.6803950001 0.6803950001); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0.2 0.4 0.8), prophoto-rgb)} + +<===> middle/output.css +a { + b: color(prophoto-rgb 0.5584197658 0.5940140048 0.8477459947); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear -1 0.4 2), prophoto-rgb)} + +<===> out_of_range/near/output.css +a { + b: color(prophoto-rgb -0.302285213 0.5192197728 1.3694597345); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear -999999 0 0), prophoto-rgb)} + +<===> out_of_range/far/output.css +a { + b: color(prophoto-rgb -1512.946773752 -594.0215467819 -223.0865568571); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0.1 0.2 0.3 / 0.4), prophoto-rgb)} + +<===> alpha/partial/output.css +a { + b: color(prophoto-rgb 0.3626946772 0.4009240289 0.4977561426 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0.1 0.2 0.3 / 0.0), prophoto-rgb)} + +<===> alpha/transparent/output.css +a { + b: color(prophoto-rgb 0.3626946772 0.4009240289 0.4977561426 / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear none 0.2 0.3), prophoto-rgb)} + +<===> missing/red/output.css +a { + b: color(prophoto-rgb none 0.3894388678 0.4961157804); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0.1 none 0.3), prophoto-rgb)} + +<===> missing/green/output.css +a { + b: color(prophoto-rgb 0.2705939482 none 0.4744752789); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0.1 0.2 none), prophoto-rgb)} + +<===> missing/blue/output.css +a { + b: color(prophoto-rgb 0.3064298164 0.3910752998 none); +} diff --git a/spec/core_functions/color/to_space/srgb_linear/rec2020.hrx b/spec/core_functions/color/to_space/srgb_linear/rec2020.hrx new file mode 100644 index 000000000..a17ad780d --- /dev/null +++ b/spec/core_functions/color/to_space/srgb_linear/rec2020.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0 0 0), rec2020)} + +<===> black/output.css +a { + b: color(rec2020 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 1 1 1), rec2020)} + +<===> white/output.css +a { + b: color(rec2020 1 1 1); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0.5 0.5 0.5), rec2020)} + +<===> gray/output.css +a { + b: color(rec2020 0.7054355531 0.7054355531 0.7054355531); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0.2 0.4 0.8), rec2020)} + +<===> middle/output.css +a { + b: color(rec2020 0.5322900823 0.6209100246 0.8693839915); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear -1 0.4 2), rec2020)} + +<===> out_of_range/near/output.css +a { + b: color(rec2020 -0.6359299305 0.5603508935 1.336426667); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear -999999 0 0), rec2020)} + +<===> out_of_range/far/output.css +a { + b: color(rec2020 -446.5956338945 -165.4289951275 -86.5355205509); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0.1 0.2 0.3 / 0.4), rec2020)} + +<===> alpha/partial/output.css +a { + b: color(rec2020 0.3568250491 0.4265433858 0.5284543831 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0.1 0.2 0.3 / 0.0), rec2020)} + +<===> alpha/transparent/output.css +a { + b: color(rec2020 0.3568250491 0.4265433858 0.5284543831 / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear none 0.2 0.3), rec2020)} + +<===> missing/red/output.css +a { + b: color(rec2020 none 0.4180412871 0.5268436405); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0.1 none 0.3), rec2020)} + +<===> missing/green/output.css +a { + b: color(rec2020 0.2448919266 none 0.5108839287); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0.1 0.2 none), rec2020)} + +<===> missing/blue/output.css +a { + b: color(rec2020 0.3374893111 0.4223703123 none); +} diff --git a/spec/core_functions/color/to_space/srgb_linear/rgb.hrx b/spec/core_functions/color/to_space/srgb_linear/rgb.hrx new file mode 100644 index 000000000..29747cbfe --- /dev/null +++ b/spec/core_functions/color/to_space/srgb_linear/rgb.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0 0 0), rgb)} + +<===> black/output.css +a { + b: black; +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 1 1 1), rgb)} + +<===> white/output.css +a { + b: white; +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0.5 0.5 0.5), rgb)} + +<===> gray/output.css +a { + b: rgb(187.5160306784, 187.5160306784, 187.5160306784); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0.2 0.4 0.8), rgb)} + +<===> middle/output.css +a { + b: rgb(123.5549471428, 169.6221965809, 231.1145971027); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear -1 0.4 2), rgb)} + +<===> out_of_range/near/output.css +a { + b: hsl(197.5434618594, 666.1615765111%, 17.6628023075%); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear -999999 0 0), rgb)} + +<===> out_of_range/far/output.css +a { + b: hsl(0, 100%, -16678.2577069634%); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0.1 0.2 0.3 / 0.4), rgb)} + +<===> alpha/partial/output.css +a { + b: rgba(89.0435042202, 123.5549471428, 148.8770299654, 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0.1 0.2 0.3 / 0.0), rgb)} + +<===> alpha/transparent/output.css +a { + b: rgba(89.0435042202, 123.5549471428, 148.8770299654, 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear none 0.2 0.3), rgb)} + +<===> missing/red/output.css +a { + b: rgb(0, 123.5549471428, 148.8770299654); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0.1 none 0.3), rgb)} + +<===> missing/green/output.css +a { + b: rgb(89.0435042202, 0, 148.8770299654); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0.1 0.2 none), rgb)} + +<===> missing/blue/output.css +a { + b: rgb(89.0435042202, 123.5549471428, 0); +} diff --git a/spec/core_functions/color/to_space/srgb_linear/srgb.hrx b/spec/core_functions/color/to_space/srgb_linear/srgb.hrx new file mode 100644 index 000000000..ea2c6f611 --- /dev/null +++ b/spec/core_functions/color/to_space/srgb_linear/srgb.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0 0 0), srgb)} + +<===> black/output.css +a { + b: color(srgb 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 1 1 1), srgb)} + +<===> white/output.css +a { + b: color(srgb 1 1 1); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0.5 0.5 0.5), srgb)} + +<===> gray/output.css +a { + b: color(srgb 0.7353569831 0.7353569831 0.7353569831); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0.2 0.4 0.8), srgb)} + +<===> middle/output.css +a { + b: color(srgb 0.4845292045 0.6651850846 0.9063317533); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear -1 0.4 2), srgb)} + +<===> out_of_range/near/output.css +a { + b: color(srgb -1 0.6651850846 1.3532560461); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear -999999 0 0), srgb)} + +<===> out_of_range/far/output.css +a { + b: color(srgb -333.5651541393 0 0); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0.1 0.2 0.3 / 0.4), srgb)} + +<===> alpha/partial/output.css +a { + b: color(srgb 0.3491902126 0.4845292045 0.5838314901 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0.1 0.2 0.3 / 0.0), srgb)} + +<===> alpha/transparent/output.css +a { + b: color(srgb 0.3491902126 0.4845292045 0.5838314901 / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear none 0.2 0.3), srgb)} + +<===> missing/red/output.css +a { + b: color(srgb none 0.4845292045 0.5838314901); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0.1 none 0.3), srgb)} + +<===> missing/green/output.css +a { + b: color(srgb 0.3491902126 none 0.5838314901); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0.1 0.2 none), srgb)} + +<===> missing/blue/output.css +a { + b: color(srgb 0.3491902126 0.4845292045 none); +} diff --git a/spec/core_functions/color/to_space/srgb_linear/srgb_linear.hrx b/spec/core_functions/color/to_space/srgb_linear/srgb_linear.hrx new file mode 100644 index 000000000..8a6fb2193 --- /dev/null +++ b/spec/core_functions/color/to_space/srgb_linear/srgb_linear.hrx @@ -0,0 +1,52 @@ +<===> in_range/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0.2 0.4 0.8), srgb-linear)} + +<===> in_range/output.css +a { + b: color(srgb-linear 0.2 0.4 0.8); +} + +<===> +================================================================================ +<===> out_of_range/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear -1 0.4 2), srgb-linear)} + +<===> out_of_range/output.css +a { + b: color(srgb-linear -1 0.4 2); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear none 0.2 0.3), srgb-linear)} + +<===> missing/red/output.css +a { + b: color(srgb-linear none 0.2 0.3); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0.1 none 0.3), srgb-linear)} + +<===> missing/green/output.css +a { + b: color(srgb-linear 0.1 none 0.3); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0.1 0.2 none), srgb-linear)} + +<===> missing/blue/output.css +a { + b: color(srgb-linear 0.1 0.2 none); +} diff --git a/spec/core_functions/color/to_space/srgb_linear/xyz.hrx b/spec/core_functions/color/to_space/srgb_linear/xyz.hrx new file mode 100644 index 000000000..8cd03cec0 --- /dev/null +++ b/spec/core_functions/color/to_space/srgb_linear/xyz.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0 0 0), xyz)} + +<===> black/output.css +a { + b: color(xyz 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 1 1 1), xyz)} + +<===> white/output.css +a { + b: color(xyz 0.9504559271 1 1.0890577508); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0.5 0.5 0.5), xyz)} + +<===> gray/output.css +a { + b: color(xyz 0.4752279635 0.5 0.5445288754); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0.2 0.4 0.8), xyz)} + +<===> middle/output.css +a { + b: color(xyz 0.3698965263 0.386349125 0.8119697975); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear -1 0.4 2), xyz)} + +<===> out_of_range/near/output.css +a { + b: color(xyz 0.0916045133 0.2178130964 1.9294113977); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear -999999 0 0), xyz)} + +<===> out_of_range/far/output.css +a { + b: color(xyz -412390.3868751602 -212638.7932325045 -19330.7993847731); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0.1 0.2 0.3 / 0.4), xyz)} + +<===> alpha/partial/output.css +a { + b: color(xyz 0.1669001843 0.1859553309 0.3109316835 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0.1 0.2 0.3 / 0.0), xyz)} + +<===> alpha/transparent/output.css +a { + b: color(xyz 0.1669001843 0.1859553309 0.3109316835 / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear none 0.2 0.3), xyz)} + +<===> missing/red/output.css +a { + b: color(xyz none 0.1646914304 0.3089986016); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0.1 none 0.3), xyz)} + +<===> missing/green/output.css +a { + b: color(xyz 0.0953833164 none 0.2870927275); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0.1 0.2 none), xyz)} + +<===> missing/blue/output.css +a { + b: color(xyz 0.1127559478 0.1642976363 none); +} diff --git a/spec/core_functions/color/to_space/srgb_linear/xyz_d50.hrx b/spec/core_functions/color/to_space/srgb_linear/xyz_d50.hrx new file mode 100644 index 000000000..eb983fe95 --- /dev/null +++ b/spec/core_functions/color/to_space/srgb_linear/xyz_d50.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0 0 0), xyz-d50)} + +<===> black/output.css +a { + b: color(xyz-d50 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 1 1 1), xyz-d50)} + +<===> white/output.css +a { + b: color(xyz-d50 0.9642956764 1 0.8251046025); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0.5 0.5 0.5), xyz-d50)} + +<===> gray/output.css +a { + b: color(xyz-d50 0.4821478382 0.5 0.4125523013); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0.2 0.4 0.8), xyz-d50)} + +<===> middle/output.css +a { + b: color(xyz-d50 0.3557364892 0.3797492885 0.6128967994); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear -1 0.4 2), xyz-d50)} + +<===> out_of_range/near/output.css +a { + b: color(xyz-d50 0.0041516969 0.1855012477 1.4531073219); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear -999999 0 0), xyz-d50)} + +<===> out_of_range/far/output.css +a { + b: color(xyz-d50 -436065.3108085225 -222492.9546173881 -13923.9075392479); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0.1 0.2 0.3 / 0.4), xyz-d50)} + +<===> alpha/partial/output.css +a { + b: color(xyz-d50 0.1635604026 0.1838126633 0.235038464 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0.1 0.2 0.3 / 0.0), xyz-d50)} + +<===> alpha/transparent/output.css +a { + b: color(xyz-d50 0.1635604026 0.1838126633 0.235038464 / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear none 0.2 0.3), xyz-d50)} + +<===> missing/red/output.css +a { + b: color(xyz-d50 none 0.1615633456 0.2336460719); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0.1 none 0.3), xyz-d50)} + +<===> missing/green/output.css +a { + b: color(xyz-d50 0.0865301007 none 0.2156221992); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(srgb-linear 0.1 0.2 none), xyz-d50)} + +<===> missing/blue/output.css +a { + b: color(xyz-d50 0.1206368766 0.1656267203 none); +} diff --git a/spec/core_functions/color/to_space/xyz/a98_rgb.hrx b/spec/core_functions/color/to_space/xyz/a98_rgb.hrx new file mode 100644 index 000000000..48b5351e3 --- /dev/null +++ b/spec/core_functions/color/to_space/xyz/a98_rgb.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0 0 0), a98-rgb)} + +<===> black/output.css +a { + b: color(a98-rgb 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 1 1 1), a98-rgb)} + +<===> white/output.css +a { + b: color(a98-rgb 1.0579328451 0.9761412908 0.9581457442); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0.5 0.5 0.5), a98-rgb)} + +<===> gray/output.css +a { + b: color(a98-rgb 0.7719295678 0.7122496746 0.6991190732); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0.2 0.4 0.8), a98-rgb)} + +<===> middle/output.css +a { + b: color(a98-rgb -0.3403753886 0.7865601683 0.8866254663); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz -1 0.4 2), a98-rgb)} + +<===> out_of_range/near/output.css +a { + b: color(a98-rgb -1.6372044815 1.3072981109 1.360980168); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz -999999 0 0), a98-rgb)} + +<===> out_of_range/far/output.css +a { + b: color(a98-rgb -739.9221025629 527.3176861205 -75.3831765931); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0.1 0.2 0.3 / 0.4), a98-rgb)} + +<===> alpha/partial/output.css +a { + b: color(a98-rgb -0.1351623531 0.5702285503 0.5625764827 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0.1 0.2 0.3 / 0.0), a98-rgb)} + +<===> alpha/transparent/output.css +a { + b: color(a98-rgb -0.1351623531 0.5702285503 0.5625764827 / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz none 0.2 0.3), a98-rgb)} + +<===> missing/red/output.css +a { + b: color(a98-rgb none 0.6499288625 0.5613563103); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0.1 none 0.3), a98-rgb)} + +<===> missing/green/output.css +a { + b: color(a98-rgb 0.3521663165 none 0.5835625865); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0.1 0.2 none), a98-rgb)} + +<===> missing/blue/output.css +a { + b: color(a98-rgb 0.3365194536 0.5589776013 none); +} diff --git a/spec/core_functions/color/to_space/xyz/display_p3.hrx b/spec/core_functions/color/to_space/xyz/display_p3.hrx new file mode 100644 index 000000000..a3a28e22d --- /dev/null +++ b/spec/core_functions/color/to_space/xyz/display_p3.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0 0 0), display-p3)} + +<===> black/output.css +a { + b: color(display-p3 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 1 1 1), display-p3)} + +<===> white/output.css +a { + b: color(display-p3 1.067061664 0.9807650127 0.9623860213); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0.5 0.5 0.5), display-p3)} + +<===> gray/output.css +a { + b: color(display-p3 0.785596466 0.7209470243 0.7071783379); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0.2 0.4 0.8), display-p3)} + +<===> middle/output.css +a { + b: color(display-p3 -0.4800324283 0.7723805169 0.8767615059); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz -1 0.4 2), display-p3)} + +<===> out_of_range/near/output.css +a { + b: color(display-p3 -1.7588549225 1.2221230245 1.3074633625); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz -999999 0 0), display-p3)} + +<===> out_of_range/far/output.css +a { + b: color(display-p3 -488.1354653538 308.5645035738 -83.3006508571); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0.1 0.2 0.3 / 0.4), display-p3)} + +<===> alpha/partial/output.css +a { + b: color(display-p3 -0.2665155311 0.5626429938 0.5614732822 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0.1 0.2 0.3 / 0.0), display-p3)} + +<===> alpha/transparent/output.css +a { + b: color(display-p3 -0.2665155311 0.5626429938 0.5614732822 / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz none 0.2 0.3), display-p3)} + +<===> missing/red/output.css +a { + b: color(display-p3 none 0.6339496775 0.5581173728); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0.1 none 0.3), display-p3)} + +<===> missing/green/output.css +a { + b: color(display-p3 0.3937592636 none 0.575458821); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0.1 0.2 none), display-p3)} + +<===> missing/blue/output.css +a { + b: color(display-p3 0.2785701294 0.5560005714 none); +} diff --git a/spec/core_functions/color/to_space/xyz/hsl.hrx b/spec/core_functions/color/to_space/xyz/hsl.hrx new file mode 100644 index 000000000..6e157ce42 --- /dev/null +++ b/spec/core_functions/color/to_space/xyz/hsl.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0 0 0), hsl)} + +<===> black/output.css +a { + b: hsl(0, 0%, 0%); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 1 1 1), hsl)} + +<===> white/output.css +a { + b: hsl(188.6326376323, 287.948753728%, 102.1970070346%); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0.5 0.5 0.5), hsl)} + +<===> gray/output.css +a { + b: hsl(8.6326376323, 19.0960524665%, 75.1815938992%); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0.2 0.4 0.8), hsl)} + +<===> middle/output.css +a { + b: hsl(183.9973689591, 600.9357681928%, 12.7508937669%); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz -1 0.4 2), hsl)} + +<===> out_of_range/near/output.css +a { + b: hsl(0.951270101, 523.3395920082%, -31.8043324514%); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz -999999 0 0), hsl)} + +<===> out_of_range/far/output.css +a { + b: hsl(330.5196564153, 405.9398117154%, -10761.9459979264%); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0.1 0.2 0.3 / 0.4), hsl)} + +<===> alpha/partial/output.css +a { + b: hsla(179.5022543706, 556.250481638%, 8.7700702541%, 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0.1 0.2 0.3 / 0.0), hsl)} + +<===> alpha/transparent/output.css +a { + b: hsla(179.5022543706, 556.250481638%, 8.7700702541%, 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz none 0.2 0.3), hsl)} + +<===> missing/red/output.css +a { + b: hsl(355.8794204538, 2697.9214173204%, -2.5244914397%); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0.1 none 0.3), hsl)} + +<===> missing/green/output.css +a { + b: hsl(290.3526254976, 328.3439800543%, 14.0892871543%); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0.1 0.2 none), hsl)} + +<===> missing/blue/output.css +a { + b: hsl(93.2964667331, 215.664278299%, 17.8710983929%); +} diff --git a/spec/core_functions/color/to_space/xyz/hwb.hrx b/spec/core_functions/color/to_space/xyz/hwb.hrx new file mode 100644 index 000000000..cafb0e07e --- /dev/null +++ b/spec/core_functions/color/to_space/xyz/hwb.hrx @@ -0,0 +1,149 @@ +<===> black/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(color(xyz 0 0 0), hwb)); + +<===> black/output.css +a { + value: black; + space: hwb; + channels: 0deg 0% 100% / 1; +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(color(xyz 1 1 1), hwb)); + +<===> white/output.css +a { + value: hsl(188.6326376323, 287.948753728%, 102.1970070346%); + space: hwb; + channels: 8.6326376323deg 95.8707526592% -8.5232614099% / 1; +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(color(xyz 0.5 0.5 0.5), hwb)); + +<===> gray/output.css +a { + value: hsl(8.6326376323, 19.0960524665%, 75.1815938992%); + space: hwb; + channels: 8.6326376323deg 70.4422580488% 20.0790702505% / 1; +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(color(xyz 0.2 0.4 0.8), hwb)); + +<===> middle/output.css +a { + value: hsl(183.9973689591, 600.9357681928%, 12.7508937669%); + space: hwb; + channels: 183.9973689591deg -63.8737876426% 10.6244248236% / 1; +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(color(xyz -1 0.4 2), hwb)); + +<===> out_of_range/near/output.css +a { + value: hsl(0.951270101, 523.3395920082%, -31.8043324514%); + space: hwb; + channels: 180.951270101deg -198.2489961434% -34.6403312406% / 1; +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(color(xyz -999999 0 0), hwb)); + +<===> out_of_range/far/output.css +a { + value: hsl(330.5196564153, 405.9398117154%, -10761.9459979264%); + space: hwb; + channels: 150.5196564153deg -54448.9693188225% -32825.0773229696% / 1; +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(color(xyz 0.1 0.2 0.3 / 0.4), hwb)); + +<===> alpha/partial/output.css +a { + value: hsla(179.5022543706, 556.250481638%, 8.7700702541%, 0.4); + space: hwb; + channels: 179.5022543706deg -40.0134877742% 42.4463717177% / 0.4; +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(color(xyz 0.1 0.2 0.3 / 0.0), hwb)); + +<===> alpha/transparent/output.css +a { + value: hsla(179.5022543706, 556.250481638%, 8.7700702541%, 0); + space: hwb; + channels: 179.5022543706deg -40.0134877742% 42.4463717177% / 0; +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(color(xyz none 0.2 0.3), hwb)); + +<===> missing/red/output.css +a { + value: hsl(355.8794204538, 2697.9214173204%, -2.5244914397%); + space: hwb; + channels: 175.8794204538deg -70.6332866707% 34.4156962088% / 1; +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(color(xyz 0.1 none 0.3), hwb)); + +<===> missing/green/output.css +a { + value: hsl(290.3526254976, 328.3439800543%, 14.0892871543%); + space: hwb; + channels: 290.3526254976deg -32.1720390494% 39.6493866421% / 1; +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +a {b: color.to-space(color(xyz 0.1 0.2 none), hwb)} + +<===> missing/blue/output.css +a { + b: hsl(93.2964667331, 215.664278299%, 17.8710983929%); +} diff --git a/spec/core_functions/color/to_space/xyz/lab.hrx b/spec/core_functions/color/to_space/xyz/lab.hrx new file mode 100644 index 000000000..15b88a992 --- /dev/null +++ b/spec/core_functions/color/to_space/xyz/lab.hrx @@ -0,0 +1,125 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0 0 0), lab)} + +<===> black/output.css +a { + b: lab(0% 0 0); +} + +<===> +================================================================================ +<===> white/options.yml +:todo: + - dart-sass # w3c/csswg-drafts#9484 + +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 1 1 1), lab)} + +<===> white/output.css +a { + b: lab(100% 0 0); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0.5 0.5 0.5), lab)} + +<===> gray/output.css +a { + b: lab(76.1608841835% 7.1944893389 4.6048603909); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0.2 0.4 0.8), lab)} + +<===> middle/output.css +a { + b: lab(68.6381340629% -79.8035401529 -34.4873470111); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz -1 0.4 2), lab)} + +<===> out_of_range/near/output.css +a { + b: lab(64.3546378926% -4876.8569771732 -106.5787284462); +} + +<===> +================================================================================ +<===> out_of_range/far/options.yml +:todo: + - dart-sass # w3c/csswg-drafts#9484 + +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz -999999 0 0), lab)} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0.1 0.2 0.3 / 0.4), lab)} + +<===> alpha/partial/output.css +a { + b: lab(51.373608379% -60.0251143111 -14.0399860293 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0.1 0.2 0.3 / 0.0), lab)} + +<===> alpha/transparent/output.css +a { + b: lab(51.373608379% -60.0251143111 -14.0399860293 / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz none 0.2 0.3), lab)} + +<===> missing/red/output.css +a { + b: lab(51.0322781723% -262.2343975897 -14.80446365); +} + +<===> +================================================================================ +<===> missing/green/options.yml +:todo: + - dart-sass # w3c/csswg-drafts#9484 + +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0.1 none 0.3), lab)} + +<===> missing/green/output.css +a { + b: lab(5.8200823344% 29.1326658037 -42.4044732971); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0.1 0.2 none), lab)} + +<===> missing/blue/output.css +a { + b: lab(51.9556818936% -50.8750926576 85.6399941916); +} diff --git a/spec/core_functions/color/to_space/xyz/lch.hrx b/spec/core_functions/color/to_space/xyz/lch.hrx new file mode 100644 index 000000000..68db6cf2e --- /dev/null +++ b/spec/core_functions/color/to_space/xyz/lch.hrx @@ -0,0 +1,125 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0 0 0), lch)} + +<===> black/output.css +a { + b: lch(0% 0 none); +} + +<===> +================================================================================ +<===> white/options.yml +:todo: + - dart-sass # w3c/csswg-drafts#9484 + +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 1 1 1), lch)} + +<===> white/output.css +a { + b: lch(100% 0 none); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0.5 0.5 0.5), lch)} + +<===> gray/output.css +a { + b: lch(76.1608841835% 8.541979634 32.621430668deg); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0.2 0.4 0.8), lch)} + +<===> middle/output.css +a { + b: lch(68.6381340629% 86.9366558179 203.3717362956deg); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz -1 0.4 2), lch)} + +<===> out_of_range/near/output.css +a { + b: lch(64.3546378926% 4878.0214227861 181.2519414622deg); +} + +<===> +================================================================================ +<===> out_of_range/far/options.yml +:todo: + - dart-sass # w3c/csswg-drafts#9484 + +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz -999999 0 0), lch)} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0.1 0.2 0.3 / 0.4), lch)} + +<===> alpha/partial/output.css +a { + b: lch(51.373608379% 61.6452395223 193.1649108151deg / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0.1 0.2 0.3 / 0.0), lch)} + +<===> alpha/transparent/output.css +a { + b: lch(51.373608379% 61.6452395223 193.1649108151deg / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz none 0.2 0.3), lch)} + +<===> missing/red/output.css +a { + b: lch(51.0322781723% 262.6519587272 183.231207866deg); +} + +<===> +================================================================================ +<===> missing/green/options.yml +:todo: + - dart-sass # w3c/csswg-drafts#9484 + +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0.1 none 0.3), lch)} + +<===> missing/green/output.css +a { + b: lch(5.8200823344% 51.4475613847 304.4897928318deg); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0.1 0.2 none), lch)} + +<===> missing/blue/output.css +a { + b: lch(51.9556818936% 99.6116642671 120.7127528375deg); +} diff --git a/spec/core_functions/color/to_space/xyz/oklab.hrx b/spec/core_functions/color/to_space/xyz/oklab.hrx new file mode 100644 index 000000000..9fd03afa7 --- /dev/null +++ b/spec/core_functions/color/to_space/xyz/oklab.hrx @@ -0,0 +1,117 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0 0 0), oklab)} + +<===> black/output.css +a { + b: oklab(0% 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 1 1 1), oklab)} + +<===> white/output.css +a { + b: oklab(100.3245366491% 0.0267595166 0.014864444); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0.5 0.5 0.5), oklab)} + +<===> gray/output.css +a { + b: oklab(79.6276375075% 0.0212390424 0.011797917); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0.2 0.4 0.8), oklab)} + +<===> middle/output.css +a { + b: oklab(70.8952946273% -0.2482574119 -0.0948731015); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz -1 0.4 2), oklab)} + +<===> out_of_range/near/output.css +a { + b: oklab(38.0019911648% -3.242940099 -0.3314216345); +} + +<===> +================================================================================ +<===> out_of_range/far/options.yml +:todo: + - dart-sass # w3c/csswg-drafts#9484 + +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz -999999 0 0), oklab)} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0.1 0.2 0.3 / 0.4), oklab)} + +<===> alpha/partial/output.css +a { + b: oklab(56.4079108835% -0.1736338918 -0.037500532 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0.1 0.2 0.3 / 0.0), oklab)} + +<===> alpha/transparent/output.css +a { + b: oklab(56.4079108835% -0.1736338918 -0.037500532 / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz none 0.2 0.3), oklab)} + +<===> missing/red/output.css +a { + b: oklab(52.699430823% -0.4922232406 -0.0409679345); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0.1 none 0.3), oklab)} + +<===> missing/green/output.css +a { + b: oklab(26.3423259569% 0.3682063514 -0.2704617545); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0.1 0.2 none), oklab)} + +<===> missing/blue/output.css +a { + b: oklab(56.6867659008% -0.1591393684 0.1508075586); +} diff --git a/spec/core_functions/color/to_space/xyz/oklch.hrx b/spec/core_functions/color/to_space/xyz/oklch.hrx new file mode 100644 index 000000000..561b582e6 --- /dev/null +++ b/spec/core_functions/color/to_space/xyz/oklch.hrx @@ -0,0 +1,117 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0 0 0), oklch)} + +<===> black/output.css +a { + b: oklch(0% 0 none); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 1 1 1), oklch)} + +<===> white/output.css +a { + b: oklch(100.3245366491% 0.0306108383 29.0514068282deg); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0.5 0.5 0.5), oklch)} + +<===> gray/output.css +a { + b: oklch(79.6276375075% 0.0242958385 29.0514068282deg); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0.2 0.4 0.8), oklch)} + +<===> middle/output.css +a { + b: oklch(70.8952946273% 0.2657680341 200.9146648791deg); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz -1 0.4 2), oklch)} + +<===> out_of_range/near/output.css +a { + b: oklch(38.0019911648% 3.2598314045 185.8352487879deg); +} + +<===> +================================================================================ +<===> out_of_range/far/options.yml +:todo: + - dart-sass # w3c/csswg-drafts#9484 + +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz -999999 0 0), oklch)} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0.1 0.2 0.3 / 0.4), oklch)} + +<===> alpha/partial/output.css +a { + b: oklch(56.4079108835% 0.1776373223 192.1872495768deg / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0.1 0.2 0.3 / 0.0), oklch)} + +<===> alpha/transparent/output.css +a { + b: oklch(56.4079108835% 0.1776373223 192.1872495768deg / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz none 0.2 0.3), oklch)} + +<===> missing/red/output.css +a { + b: oklch(52.699430823% 0.4939251868 184.7577843583deg); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0.1 none 0.3), oklch)} + +<===> missing/green/output.css +a { + b: oklch(26.3423259569% 0.4568648354 323.7012836228deg); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0.1 0.2 none), oklch)} + +<===> missing/blue/output.css +a { + b: oklch(56.6867659008% 0.2192447453 136.539820405deg); +} diff --git a/spec/core_functions/color/to_space/xyz/prophoto_rgb.hrx b/spec/core_functions/color/to_space/xyz/prophoto_rgb.hrx new file mode 100644 index 000000000..38e01822a --- /dev/null +++ b/spec/core_functions/color/to_space/xyz/prophoto_rgb.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0 0 0), prophoto-rgb)} + +<===> black/output.css +a { + b: color(prophoto-rgb 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 1 1 1), prophoto-rgb)} + +<===> white/output.css +a { + b: color(prophoto-rgb 1.0429146548 0.9845782985 0.953747937); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0.5 0.5 0.5), prophoto-rgb)} + +<===> gray/output.css +a { + b: color(prophoto-rgb 0.7095939166 0.6699021515 0.6489253277); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0.2 0.4 0.8), prophoto-rgb)} + +<===> middle/output.css +a { + b: color(prophoto-rgb 0.2936039607 0.6811658686 0.8421802859); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz -1 0.4 2), prophoto-rgb)} + +<===> out_of_range/near/output.css +a { + b: color(prophoto-rgb -1.340921335 1.0822677288 1.4036262654); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz -999999 0 0), prophoto-rgb)} + +<===> out_of_range/far/output.css +a { + b: color(prophoto-rgb -2600.5460588084 1508.1151466205 177.670007881); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0.1 0.2 0.3 / 0.4), prophoto-rgb)} + +<===> alpha/partial/output.css +a { + b: color(prophoto-rgb 0.2194696613 0.4617099795 0.489000517 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0.1 0.2 0.3 / 0.0), prophoto-rgb)} + +<===> alpha/transparent/output.css +a { + b: color(prophoto-rgb 0.2194696613 0.4617099795 0.489000517 / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz none 0.2 0.3), prophoto-rgb)} + +<===> missing/red/output.css +a { + b: color(prophoto-rgb none 0.5136422936 0.49010255); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0.1 none 0.3), prophoto-rgb)} + +<===> missing/green/output.css +a { + b: color(prophoto-rgb 0.2931451274 none 0.4853966387); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0.1 0.2 none), prophoto-rgb)} + +<===> missing/blue/output.css +a { + b: color(prophoto-rgb 0.2715690946 0.4564221473 none); +} diff --git a/spec/core_functions/color/to_space/xyz/rec2020.hrx b/spec/core_functions/color/to_space/xyz/rec2020.hrx new file mode 100644 index 000000000..107b49888 --- /dev/null +++ b/spec/core_functions/color/to_space/xyz/rec2020.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0 0 0), rec2020)} + +<===> black/output.css +a { + b: color(rec2020 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 1 1 1), rec2020)} + +<===> white/output.css +a { + b: color(rec2020 1.0517415202 0.9828015442 0.9579473111); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0.5 0.5 0.5), rec2020)} + +<===> gray/output.css +a { + b: color(rec2020 0.7433125628 0.6928455465 0.6746511829); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0.2 0.4 0.8), rec2020)} + +<===> middle/output.css +a { + b: color(rec2020 -0.0073399546 0.7239127682 0.8607584595); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz -1 0.4 2), rec2020)} + +<===> out_of_range/near/output.css +a { + b: color(rec2020 -1.5202475993 1.156770634 1.350426083); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz -999999 0 0), rec2020)} + +<===> out_of_range/far/output.css +a { + b: color(rec2020 -702.5226404146 458.9706861542 -89.4449238228); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0.1 0.2 0.3 / 0.4), rec2020)} + +<===> alpha/partial/output.css +a { + b: color(rec2020 0.1079117715 0.501698873 0.516462928 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0.1 0.2 0.3 / 0.0), rec2020)} + +<===> alpha/transparent/output.css +a { + b: color(rec2020 0.1079117715 0.501698873 0.516462928 / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz none 0.2 0.3), rec2020)} + +<===> missing/red/output.css +a { + b: color(rec2020 none 0.5663964614 0.5146878151); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0.1 none 0.3), rec2020)} + +<===> missing/green/output.css +a { + b: color(rec2020 0.2830292386 none 0.5249837189); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0.1 0.2 none), rec2020)} + +<===> missing/blue/output.css +a { + b: color(rec2020 0.2916789955 0.496779191 none); +} diff --git a/spec/core_functions/color/to_space/xyz/rgb.hrx b/spec/core_functions/color/to_space/xyz/rgb.hrx new file mode 100644 index 000000000..988e65f5d --- /dev/null +++ b/spec/core_functions/color/to_space/xyz/rgb.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0 0 0), rgb)} + +<===> black/output.css +a { + b: black; +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 1 1 1), rgb)} + +<===> white/output.css +a { + b: hsl(188.6326376323, 287.948753728%, 102.1970070346%); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0.5 0.5 0.5), rgb)} + +<===> gray/output.css +a { + b: rgb(203.7983708613, 183.1053603906, 179.6277580244); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0.2 0.4 0.8), rgb)} + +<===> middle/output.css +a { + b: hsl(183.9973689591, 600.9357681928%, 12.7508937669%); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz -1 0.4 2), rgb)} + +<===> out_of_range/near/output.css +a { + b: hsl(0.951270101, 523.3395920082%, -31.8043324514%); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz -999999 0 0), rgb)} + +<===> out_of_range/far/output.css +a { + b: hsl(330.5196564153, 405.9398117154%, -10761.9459979264%); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0.1 0.2 0.3 / 0.4), rgb)} + +<===> alpha/partial/output.css +a { + b: hsla(179.5022543706, 556.250481638%, 8.7700702541%, 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0.1 0.2 0.3 / 0.0), rgb)} + +<===> alpha/transparent/output.css +a { + b: hsla(179.5022543706, 556.250481638%, 8.7700702541%, 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz none 0.2 0.3), rgb)} + +<===> missing/red/output.css +a { + b: rgb(0, 167.2399746676, 143.3849194416); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0.1 none 0.3), rgb)} + +<===> missing/green/output.css +a { + b: rgb(115.9585352591, 0, 153.8940640627); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0.1 0.2 none), rgb)} + +<===> missing/blue/output.css +a { + b: rgb(34.7719641116, 143.8523181031, 0); +} diff --git a/spec/core_functions/color/to_space/xyz/srgb.hrx b/spec/core_functions/color/to_space/xyz/srgb.hrx new file mode 100644 index 000000000..1e4417ffc --- /dev/null +++ b/spec/core_functions/color/to_space/xyz/srgb.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0 0 0), srgb)} + +<===> black/output.css +a { + b: color(srgb 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 1 1 1), srgb)} + +<===> white/output.css +a { + b: color(srgb 1.0852326141 0.9769116138 0.9587075266); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0.5 0.5 0.5), srgb)} + +<===> gray/output.css +a { + b: color(srgb 0.7992092975 0.7180602368 0.7044225805); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0.2 0.4 0.8), srgb)} + +<===> middle/output.css +a { + b: color(srgb -0.6387378764 0.7916567108 0.8937557518); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz -1 0.4 2), srgb)} + +<===> out_of_range/near/output.css +a { + b: color(srgb -1.9824899614 1.2936253684 1.3464033124); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz -999999 0 0), srgb)} + +<===> out_of_range/far/output.css +a { + b: color(srgb -544.4896931882 329.2507732297 -100.0520460013); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0.1 0.2 0.3 / 0.4), srgb)} + +<===> alpha/partial/output.css +a { + b: color(srgb -0.4001348777 0.5755362828 0.5674423486 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0.1 0.2 0.3 / 0.0), srgb)} + +<===> alpha/transparent/output.css +a { + b: color(srgb -0.4001348777 0.5755362828 0.5674423486 / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz none 0.2 0.3), srgb)} + +<===> missing/red/output.css +a { + b: color(srgb none 0.6558430379 0.5622938017); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0.1 none 0.3), srgb)} + +<===> missing/green/output.css +a { + b: color(srgb 0.454739354 none 0.6035061336); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0.1 0.2 none), srgb)} + +<===> missing/blue/output.css +a { + b: color(srgb 0.1363606436 0.5641267377 none); +} diff --git a/spec/core_functions/color/to_space/xyz/srgb_linear.hrx b/spec/core_functions/color/to_space/xyz/srgb_linear.hrx new file mode 100644 index 000000000..aaf930abb --- /dev/null +++ b/spec/core_functions/color/to_space/xyz/srgb_linear.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0 0 0), srgb-linear)} + +<===> black/output.css +a { + b: color(srgb-linear 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 1 1 1), srgb-linear)} + +<===> white/output.css +a { + b: color(srgb-linear 1.204976004 0.9482789226 0.9086246351); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0.5 0.5 0.5), srgb-linear)} + +<===> gray/output.css +a { + b: color(srgb-linear 0.602488002 0.4741394613 0.4543123175); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0.2 0.4 0.8), srgb-linear)} + +<===> middle/output.css +a { + b: color(srgb-linear -0.3656478909 0.5897823193 0.7751124438); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz -1 0.4 2), srgb-linear)} + +<===> out_of_range/near/output.css +a { + b: color(srgb-linear -4.8531447335 1.8027407517 1.9767221652); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz -999999 0 0), srgb-linear)} + +<===> out_of_range/far/output.css +a { + b: color(srgb-linear -3240966.700934579 969242.6670372436 -55630.0240669139); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0.1 0.2 0.3 / 0.4), srgb-linear)} + +<===> alpha/partial/output.css +a { + b: color(srgb-linear -0.1329628694 0.2907356539 0.2818590705 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0.1 0.2 0.3 / 0.0), srgb-linear)} + +<===> alpha/transparent/output.css +a { + b: color(srgb-linear -0.1329628694 0.2907356539 0.2818590705 / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz none 0.2 0.3), srgb-linear)} + +<===> missing/red/output.css +a { + b: color(srgb-linear none 0.3876600175 0.2762960625); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0.1 none 0.3), srgb-linear)} + +<===> missing/green/output.css +a { + b: color(srgb-linear 0.1745137661 none 0.3226544622); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0.1 0.2 none), srgb-linear)} + +<===> missing/blue/output.css +a { + b: color(srgb-linear 0.0166203587 0.2782691367 none); +} diff --git a/spec/core_functions/color/to_space/xyz/xyz.hrx b/spec/core_functions/color/to_space/xyz/xyz.hrx new file mode 100644 index 000000000..1d30db6fc --- /dev/null +++ b/spec/core_functions/color/to_space/xyz/xyz.hrx @@ -0,0 +1,52 @@ +<===> in_range/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0.2 0.4 0.8), xyz)} + +<===> in_range/output.css +a { + b: color(xyz 0.2 0.4 0.8); +} + +<===> +================================================================================ +<===> out_of_range/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz -1 0.4 2), xyz)} + +<===> out_of_range/output.css +a { + b: color(xyz -1 0.4 2); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz none 0.2 0.3), xyz)} + +<===> missing/red/output.css +a { + b: color(xyz none 0.2 0.3); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0.1 none 0.3), xyz)} + +<===> missing/green/output.css +a { + b: color(xyz 0.1 none 0.3); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0.1 0.2 none), xyz)} + +<===> missing/blue/output.css +a { + b: color(xyz 0.1 0.2 none); +} diff --git a/spec/core_functions/color/to_space/xyz/xyz_d50.hrx b/spec/core_functions/color/to_space/xyz/xyz_d50.hrx new file mode 100644 index 000000000..98296f8c7 --- /dev/null +++ b/spec/core_functions/color/to_space/xyz/xyz_d50.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0 0 0), xyz-d50)} + +<===> black/output.css +a { + b: color(xyz-d50 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 1 1 1), xyz-d50)} + +<===> white/output.css +a { + b: color(xyz-d50 1.0206843969 1.0029884365 0.7576864323); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0.5 0.5 0.5), xyz-d50)} + +<===> gray/output.css +a { + b: color(xyz-d50 0.5103421984 0.5014942182 0.3788432161); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0.2 0.4 0.8), xyz-d50)} + +<===> middle/output.css +a { + b: color(xyz-d50 0.1786108937 0.3884402932 0.6056728936); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz -1 0.4 2), xyz-d50)} + +<===> out_of_range/near/output.css +a { + b: color(xyz-d50 -1.1391355769 0.3323983638 1.5190136801); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz -999999 0 0), xyz-d50)} + +<===> out_of_range/far/output.css +a { + b: color(xyz-d50 -1047928.744615204 -29627.7791422469 9243.0314031639); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0.1 0.2 0.3 / 0.4), xyz-d50)} + +<===> alpha/partial/output.css +a { + b: color(xyz-d50 0.0943246735 0.1959275265 0.2276490187 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0.1 0.2 0.3 / 0.0), xyz-d50)} + +<===> alpha/transparent/output.css +a { + b: color(xyz-d50 0.0943246735 0.1959275265 0.2276490187 / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz none 0.2 0.3), xyz-d50)} + +<===> missing/red/output.css +a { + b: color(xyz-d50 none 0.1929647456 0.2285733227); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0.1 none 0.3), xyz-d50)} + +<===> missing/green/output.css +a { + b: color(xyz-d50 0.0897352994 none 0.2246379804); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz 0.1 0.2 none), xyz-d50)} + +<===> missing/blue/output.css +a { + b: color(xyz-d50 0.1093823534 0.2010496662 none); +} diff --git a/spec/core_functions/color/to_space/xyz_d50/xyz-d50/a98_rgb.hrx b/spec/core_functions/color/to_space/xyz_d50/xyz-d50/a98_rgb.hrx new file mode 100644 index 000000000..1c954710a --- /dev/null +++ b/spec/core_functions/color/to_space/xyz_d50/xyz-d50/a98_rgb.hrx @@ -0,0 +1,52 @@ +<===> in_range/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0.2 0.4 0.8), xyz-d50)} + +<===> in_range/output.css +a { + b: color(xyz-d50 0.2 0.4 0.8); +} + +<===> +================================================================================ +<===> out_of_range/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 -1 0.4 2), xyz-d50)} + +<===> out_of_range/output.css +a { + b: color(xyz-d50 -1 0.4 2); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 none 0.2 0.3), xyz-d50)} + +<===> missing/red/output.css +a { + b: color(xyz-d50 none 0.2 0.3); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0.1 none 0.3), xyz-d50)} + +<===> missing/green/output.css +a { + b: color(xyz-d50 0.1 none 0.3); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0.1 0.2 none), xyz-d50)} + +<===> missing/blue/output.css +a { + b: color(xyz-d50 0.1 0.2 none); +} diff --git a/spec/core_functions/color/to_space/xyz_d50/xyz-d50/display_p3.hrx b/spec/core_functions/color/to_space/xyz_d50/xyz-d50/display_p3.hrx new file mode 100644 index 000000000..85e1130a0 --- /dev/null +++ b/spec/core_functions/color/to_space/xyz_d50/xyz-d50/display_p3.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0 0 0), display-p3)} + +<===> black/output.css +a { + b: color(display-p3 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 1 1 1), display-p3)} + +<===> white/output.css +a { + b: color(display-p3 1.0071270999 0.9879174398 1.092886631); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0.5 0.5 0.5), display-p3)} + +<===> gray/output.css +a { + b: color(display-p3 0.7406962751 0.7263052903 0.8049433314); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0.2 0.4 0.8), display-p3)} + +<===> middle/output.css +a { + b: color(display-p3 -0.520302433 0.7760128678 0.9954240218); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 -1 0.4 2), display-p3)} + +<===> out_of_range/near/output.css +a { + b: color(display-p3 -1.7430526394 1.2261981059 1.4801698042); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 -999999 0 0), display-p3)} + +<===> out_of_range/far/output.css +a { + b: color(display-p3 -480.7511485906 310.5370514577 -94.2421709039); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0.1 0.2 0.3 / 0.4), display-p3)} + +<===> alpha/partial/output.css +a { + b: color(display-p3 -0.3072826123 0.5660777225 0.6401555397 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0.1 0.2 0.3 / 0.0), display-p3)} + +<===> alpha/transparent/output.css +a { + b: color(display-p3 -0.3072826123 0.5660777225 0.6401555397 / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 none 0.2 0.3), display-p3)} + +<===> missing/red/output.css +a { + b: color(display-p3 none 0.637912978 0.6363418884); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0.1 none 0.3), display-p3)} + +<===> missing/green/output.css +a { + b: color(display-p3 0.3827670965 none 0.655277932); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0.1 0.2 none), display-p3)} + +<===> missing/blue/output.css +a { + b: color(display-p3 0.2276620199 0.5616123537 none); +} diff --git a/spec/core_functions/color/to_space/xyz_d50/xyz-d50/hsl.hrx b/spec/core_functions/color/to_space/xyz_d50/xyz-d50/hsl.hrx new file mode 100644 index 000000000..2d8aa960e --- /dev/null +++ b/spec/core_functions/color/to_space/xyz_d50/xyz-d50/hsl.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0 0 0), hsl)} + +<===> black/output.css +a { + b: hsl(0, 0%, 0%); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 1 1 1), hsl)} + +<===> white/output.css +a { + b: hsl(72.6622302958, 128.9066481357%, 104.4631089642%); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0.5 0.5 0.5), hsl)} + +<===> gray/output.css +a { + b: hsl(252.6622302958, 18.6415390171%, 76.8792521782%); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0.2 0.4 0.8), hsl)} + +<===> middle/output.css +a { + b: hsl(187.9353554297, 490.1229331153%, 17.2918334784%); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 -1 0.4 2), hsl)} + +<===> out_of_range/near/output.css +a { + b: hsl(3.9698519642, 796.3834139233%, -21.9385057601%); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 -999999 0 0), hsl)} + +<===> out_of_range/far/output.css +a { + b: hsl(329.431996419, 420.4439814741%, -10316.9080915762%); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0.1 0.2 0.3 / 0.4), hsl)} + +<===> alpha/partial/output.css +a { + b: hsla(184.0103843189, 495.2078632431%, 10.9589006248%, 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0.1 0.2 0.3 / 0.0), hsl)} + +<===> alpha/transparent/output.css +a { + b: hsla(184.0103843189, 495.2078632431%, 10.9589006248%, 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 none 0.2 0.3), hsl)} + +<===> missing/red/output.css +a { + b: hsl(359.4153454139, 2475.3715741602%, -2.7790249918%); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0.1 none 0.3), hsl)} + +<===> missing/green/output.css +a { + b: hsl(285.6927471827, 282.9980963007%, 17.9207568387%); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0.1 0.2 none), hsl)} + +<===> missing/blue/output.css +a { + b: hsl(111.1172729557, 222.5792269318%, 17.6906141138%); +} diff --git a/spec/core_functions/color/to_space/xyz_d50/xyz-d50/hwb.hrx b/spec/core_functions/color/to_space/xyz_d50/xyz-d50/hwb.hrx new file mode 100644 index 000000000..cb868440a --- /dev/null +++ b/spec/core_functions/color/to_space/xyz_d50/xyz-d50/hwb.hrx @@ -0,0 +1,149 @@ +<===> black/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(color(xyz-d50 0 0 0), hwb)); + +<===> black/output.css +a { + value: black; + space: hwb; + channels: 0deg 0% 100% / 1; +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(color(xyz-d50 1 1 1), hwb)); + +<===> white/output.css +a { + value: hsl(72.6622302958, 128.9066481357%, 104.4631089642%); + space: hwb; + channels: 252.6622302958deg 98.7098647958% -10.2163531326% / 1; +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(color(xyz-d50 0.5 0.5 0.5), hwb)); + +<===> gray/output.css +a { + value: hsl(252.6622302958, 18.6415390171%, 76.8792521782%); + space: hwb; + channels: 252.6622302958deg 72.569188952% 18.8106845955% / 1; +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(color(xyz-d50 0.2 0.4 0.8), hwb)); + +<===> middle/output.css +a { + value: hsl(187.9353554297, 490.1229331153%, 17.2918334784%); + space: hwb; + channels: 187.9353554297deg -67.4594079552% -2.043074912% / 1; +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(color(xyz-d50 -1 0.4 2), hwb)); + +<===> out_of_range/near/output.css +a { + value: hsl(3.9698519642, 796.3834139233%, -21.9385057601%); + space: hwb; + channels: 183.9698519642deg -196.6531268961% -52.7761153759% / 1; +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(color(xyz-d50 -999999 0 0), hwb)); + +<===> out_of_range/far/output.css +a { + value: hsl(329.431996419, 420.4439814741%, -10316.9080915763%); + space: hwb; + channels: 149.431996419deg -53693.7272368212% -32959.9110536687% / 1; +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(color(xyz-d50 0.1 0.2 0.3 / 0.4), hwb)); + +<===> alpha/partial/output.css +a { + value: hsla(184.0103843189, 495.2078632431%, 10.9589006248%, 0.4); + space: hwb; + channels: 184.0103843189deg -43.310436994% 34.7717617565% / 0.4; +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(color(xyz-d50 0.1 0.2 0.3 / 0.0), hwb)); + +<===> alpha/transparent/output.css +a { + value: hsla(184.0103843189, 495.2078632431%, 10.9589006248%, 0); + space: hwb; + channels: 184.0103843189deg -43.310436994% 34.7717617565% / 0; +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(color(xyz-d50 none 0.2 0.3), hwb)); + +<===> missing/red/output.css +a { + value: hsl(359.4153454139, 2475.3715741602%, -2.7790249918%); + space: hwb; + channels: 179.4153454139deg -71.5702196777% 33.9878303059% / 1; +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +@include utils.inspect(color.to-space(color(xyz-d50 0.1 none 0.3), hwb)); + +<===> missing/green/output.css +a { + value: hsl(285.6927471827, 282.9980963007%, 17.9207568387%); + space: hwb; + channels: 285.6927471827deg -32.7946438576% 31.363842465% / 1; +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +@use 'core_functions/color/utils'; +a {b: color.to-space(color(xyz-d50 0.1 0.2 none), hwb)} + +<===> missing/blue/output.css +a { + b: hsl(111.1172729557, 222.5792269318%, 17.6906141138%); +} diff --git a/spec/core_functions/color/to_space/xyz_d50/xyz-d50/lab.hrx b/spec/core_functions/color/to_space/xyz_d50/xyz-d50/lab.hrx new file mode 100644 index 000000000..b92ecb795 --- /dev/null +++ b/spec/core_functions/color/to_space/xyz_d50/xyz-d50/lab.hrx @@ -0,0 +1,117 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0 0 0), lab)} + +<===> black/output.css +a { + b: lab(0% 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 1 1 1), lab)} + +<===> white/output.css +a { + b: lab(100% 6.096419139 -13.2359011077); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0.5 0.5 0.5), lab)} + +<===> gray/output.css +a { + b: lab(76.0692610142% 4.8387310772 -10.505341671); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0.2 0.4 0.8), lab)} + +<===> middle/output.css +a { + b: lab(69.4695307685% -72.4361685024 -50.5894155557); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 -1 0.4 2), lab)} + +<===> out_of_range/near/output.css +a { + b: lab(69.4695307685% -4337.1188269787 -121.2991404532); +} + +<===> +================================================================================ +<===> out_of_range/far/options.yml +:todo: + - dart-sass # w3c/csswg-drafts#9484 + +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 -999999 0 0), lab)} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0.1 0.2 0.3 / 0.4), lab)} + +<===> alpha/partial/output.css +a { + b: lab(51.8372115265% -57.4926250406 -25.7864288134 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0.1 0.2 0.3 / 0.0), lab)} + +<===> alpha/transparent/output.css +a { + b: lab(51.8372115265% -57.4926250406 -25.7864288134 / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 none 0.2 0.3), lab)} + +<===> missing/red/output.css +a { + b: lab(51.8372115265% -223.4362565799 -25.7864288134); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0.1 none 0.3), lab)} + +<===> missing/green/output.css +a { + b: lab(0% 165.9436315393 -115.1609314454); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0.1 0.2 none), lab)} + +<===> missing/blue/output.css +a { + b: lab(51.8372115265% -57.4926250406 89.374502632); +} diff --git a/spec/core_functions/color/to_space/xyz_d50/xyz-d50/lch.hrx b/spec/core_functions/color/to_space/xyz_d50/xyz-d50/lch.hrx new file mode 100644 index 000000000..4e429c840 --- /dev/null +++ b/spec/core_functions/color/to_space/xyz_d50/xyz-d50/lch.hrx @@ -0,0 +1,117 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0 0 0), lch)} + +<===> black/output.css +a { + b: lch(0% 0 none); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 1 1 1), lch)} + +<===> white/output.css +a { + b: lch(100% 14.5724193067 294.7306655583deg); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0.5 0.5 0.5), lch)} + +<===> gray/output.css +a { + b: lch(76.0692610142% 11.5661368686 294.7306655583deg); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0.2 0.4 0.8), lch)} + +<===> middle/output.css +a { + b: lch(69.4695307685% 88.3531973025 214.9304458642deg); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 -1 0.4 2), lch)} + +<===> out_of_range/near/output.css +a { + b: lch(69.4695307685% 4338.814723033 181.6020122751deg); +} + +<===> +================================================================================ +<===> out_of_range/far/options.yml +:todo: + - dart-sass # w3c/csswg-drafts#9484 + +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 -999999 0 0), lch)} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0.1 0.2 0.3 / 0.4), lch)} + +<===> alpha/partial/output.css +a { + b: lch(51.8372115265% 63.0106486636 204.1570528501deg / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0.1 0.2 0.3 / 0.0), lch)} + +<===> alpha/transparent/output.css +a { + b: lch(51.8372115265% 63.0106486636 204.1570528501deg / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 none 0.2 0.3), lch)} + +<===> missing/red/output.css +a { + b: lch(51.8372115265% 224.9193203471 186.5832915139deg); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0.1 none 0.3), lch)} + +<===> missing/green/output.css +a { + b: lch(0% 201.988437738 325.2402722247deg); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0.1 0.2 none), lch)} + +<===> missing/blue/output.css +a { + b: lch(51.8372115265% 106.2694860003 122.7522732424deg); +} diff --git a/spec/core_functions/color/to_space/xyz_d50/xyz-d50/oklab.hrx b/spec/core_functions/color/to_space/xyz_d50/xyz-d50/oklab.hrx new file mode 100644 index 000000000..4ff8ac832 --- /dev/null +++ b/spec/core_functions/color/to_space/xyz_d50/xyz-d50/oklab.hrx @@ -0,0 +1,117 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0 0 0), oklab)} + +<===> black/output.css +a { + b: oklab(0% 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 1 1 1), oklab)} + +<===> white/output.css +a { + b: oklab(100.3624960247% 0.0167855154 -0.0354164295); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0.5 0.5 0.5), oklab)} + +<===> gray/output.css +a { + b: oklab(79.6577658839% 0.0133226724 -0.0281100387); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0.2 0.4 0.8), oklab)} + +<===> middle/output.css +a { + b: oklab(71.9979200541% -0.2538804764 -0.1411846084); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 -1 0.4 2), oklab)} + +<===> out_of_range/near/output.css +a { + b: oklab(42.8855772157% -3.2722752803 -0.3756610558); +} + +<===> +================================================================================ +<===> out_of_range/far/options.yml +:todo: + - dart-sass # w3c/csswg-drafts#9484 + +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 -999999 0 0), oklab)} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0.1 0.2 0.3 / 0.4), oklab)} + +<===> alpha/partial/output.css +a { + b: oklab(56.9970926622% -0.1786682028 -0.0706832596 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0.1 0.2 0.3 / 0.0), oklab)} + +<===> alpha/transparent/output.css +a { + b: oklab(56.9970926622% -0.1786682028 -0.0706832596 / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 none 0.2 0.3), oklab)} + +<===> missing/red/output.css +a { + b: oklab(53.737032336% -0.4814823965 -0.0723240631); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0.1 none 0.3), oklab)} + +<===> missing/green/output.css +a { + b: oklab(29.1994683846% 0.3079984165 -0.2894921466); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0.1 0.2 none), oklab)} + +<===> missing/blue/output.css +a { + b: oklab(56.4114760121% -0.1759135151 0.1541840121); +} diff --git a/spec/core_functions/color/to_space/xyz_d50/xyz-d50/oklch.hrx b/spec/core_functions/color/to_space/xyz_d50/xyz-d50/oklch.hrx new file mode 100644 index 000000000..183c19eec --- /dev/null +++ b/spec/core_functions/color/to_space/xyz_d50/xyz-d50/oklch.hrx @@ -0,0 +1,117 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0 0 0), oklch)} + +<===> black/output.css +a { + b: oklch(0% 0 none); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 1 1 1), oklch)} + +<===> white/output.css +a { + b: oklch(100.3624960247% 0.0391928183 295.3584786053deg); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0.5 0.5 0.5), oklch)} + +<===> gray/output.css +a { + b: oklch(79.6577658839% 0.0311073605 295.3584786053deg); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0.2 0.4 0.8), oklch)} + +<===> middle/output.css +a { + b: oklch(71.9979200541% 0.2904967986 209.0787246058deg); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 -1 0.4 2), oklch)} + +<===> out_of_range/near/output.css +a { + b: oklch(42.8855772157% 3.2937678635 186.548953155deg); +} + +<===> +================================================================================ +<===> out_of_range/far/options.yml +:todo: + - dart-sass # w3c/csswg-drafts#9484 + +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 -999999 0 0), oklch)} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0.1 0.2 0.3 / 0.4), oklch)} + +<===> alpha/partial/output.css +a { + b: oklch(56.9970926622% 0.1921417442 201.5843389185deg / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0.1 0.2 0.3 / 0.0), oklch)} + +<===> alpha/transparent/output.css +a { + b: oklch(56.9970926622% 0.1921417442 201.5843389185deg / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 none 0.2 0.3), oklch)} + +<===> missing/red/output.css +a { + b: oklch(53.737032336% 0.4868840398 188.5426015282deg); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0.1 none 0.3), oklch)} + +<===> missing/green/output.css +a { + b: oklch(29.1994683846% 0.4226922374 316.7740736717deg); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0.1 0.2 none), oklch)} + +<===> missing/blue/output.css +a { + b: oklch(56.4114760121% 0.2339193759 138.7662056048deg); +} diff --git a/spec/core_functions/color/to_space/xyz_d50/xyz-d50/prophoto_rgb.hrx b/spec/core_functions/color/to_space/xyz_d50/xyz-d50/prophoto_rgb.hrx new file mode 100644 index 000000000..203310878 --- /dev/null +++ b/spec/core_functions/color/to_space/xyz_d50/xyz-d50/prophoto_rgb.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0 0 0), prophoto-rgb)} + +<===> black/output.css +a { + b: color(prophoto-rgb 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 1 1 1), prophoto-rgb)} + +<===> white/output.css +a { + b: color(prophoto-rgb 1.0215440123 0.9911601047 1.1127148486); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0.5 0.5 0.5), prophoto-rgb)} + +<===> gray/output.css +a { + b: color(prophoto-rgb 0.6950534384 0.6743803795 0.7570856195); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0.2 0.4 0.8), prophoto-rgb)} + +<===> middle/output.css +a { + b: color(prophoto-rgb 0.3164433223 0.688517143 0.9829806921); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 -1 0.4 2), prophoto-rgb)} + +<===> out_of_range/near/output.css +a { + b: color(prophoto-rgb -1.2757747112 1.1009423845 1.6353953931); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 -999999 0 0), prophoto-rgb)} + +<===> out_of_range/far/output.css +a { + b: color(prophoto-rgb -2540.8942289653 1537.1744596752 0); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0.1 0.2 0.3 / 0.4), prophoto-rgb)} + +<===> alpha/partial/output.css +a { + b: color(prophoto-rgb 0.2248370109 0.4663680632 0.5700273474 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0.1 0.2 0.3 / 0.0), prophoto-rgb)} + +<===> alpha/transparent/output.css +a { + b: color(prophoto-rgb 0.2248370109 0.4663680632 0.5700273474 / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 none 0.2 0.3), prophoto-rgb)} + +<===> missing/red/output.css +a { + b: color(prophoto-rgb none 0.5196499466 0.5700273474); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0.1 none 0.3), prophoto-rgb)} + +<===> missing/green/output.css +a { + b: color(prophoto-rgb 0.3068439327 none 0.5700273474); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0.1 0.2 none), prophoto-rgb)} + +<===> missing/blue/output.css +a { + b: color(prophoto-rgb 0.251671286 0.4600356682 none); +} diff --git a/spec/core_functions/color/to_space/xyz_d50/xyz-d50/rec2020.hrx b/spec/core_functions/color/to_space/xyz_d50/xyz-d50/rec2020.hrx new file mode 100644 index 000000000..7e157d814 --- /dev/null +++ b/spec/core_functions/color/to_space/xyz_d50/xyz-d50/rec2020.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0 0 0), rec2020)} + +<===> black/output.css +a { + b: color(rec2020 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 1 1 1), rec2020)} + +<===> white/output.css +a { + b: color(rec2020 1.0086369229 0.9889840495 1.1030370326); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0.5 0.5 0.5), rec2020)} + +<===> gray/output.css +a { + b: color(rec2020 0.7117581507 0.6973714052 0.7808630758); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0.2 0.4 0.8), rec2020)} + +<===> middle/output.css +a { + b: color(rec2020 -0.075615701 0.7287813238 0.9918551161); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 -1 0.4 2), rec2020)} + +<===> out_of_range/near/output.css +a { + b: color(rec2020 -1.4925160884 1.1662135588 1.5466705118); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 -999999 0 0), rec2020)} + +<===> out_of_range/far/output.css +a { + b: color(rec2020 -689.5826182995 463.8899975273 -113.049587293); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0.1 0.2 0.3 / 0.4), rec2020)} + +<===> alpha/partial/output.css +a { + b: color(rec2020 0.0683739868 0.5055777091 0.6004180325 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0.1 0.2 0.3 / 0.0), rec2020)} + +<===> alpha/transparent/output.css +a { + b: color(rec2020 0.0683739868 0.5055777091 0.6004180325 / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 none 0.2 0.3), rec2020)} + +<===> missing/red/output.css +a { + b: color(rec2020 none 0.57127065 0.5978630317); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0.1 none 0.3), rec2020)} + +<===> missing/green/output.css +a { + b: color(rec2020 0.2799117622 none 0.6111315018); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0.1 0.2 none), rec2020)} + +<===> missing/blue/output.css +a { + b: color(rec2020 0.2651201665 0.5016141545 none); +} diff --git a/spec/core_functions/color/to_space/xyz_d50/xyz-d50/rgb.hrx b/spec/core_functions/color/to_space/xyz_d50/xyz-d50/rgb.hrx new file mode 100644 index 000000000..8055dff9d --- /dev/null +++ b/spec/core_functions/color/to_space/xyz_d50/xyz-d50/rgb.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0 0 0), rgb)} + +<===> black/output.css +a { + b: black; +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 1 1 1), rgb)} + +<===> white/output.css +a { + b: hsl(72.6622302958, 128.9066481357%, 104.4631089642%); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0.5 0.5 0.5), rgb)} + +<===> gray/output.css +a { + b: rgb(189.6903079461, 185.0514318275, 207.0327542814); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0.2 0.4 0.8), rgb)} + +<===> middle/output.css +a { + b: hsl(187.9353554297, 490.1229331153%, 17.2918334784%); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 -1 0.4 2), rgb)} + +<===> out_of_range/near/output.css +a { + b: hsl(3.9698519642, 796.3834139233%, -21.9385057601%); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 -999999 0 0), rgb)} + +<===> out_of_range/far/output.css +a { + b: hsl(329.431996419, 420.4439814741%, -10316.9080915762%); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0.1 0.2 0.3 / 0.4), rgb)} + +<===> alpha/partial/output.css +a { + b: hsla(184.0103843189, 495.2078632431%, 10.9589006248%, 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0.1 0.2 0.3 / 0.0), rgb)} + +<===> alpha/transparent/output.css +a { + b: hsla(184.0103843189, 495.2078632431%, 10.9589006248%, 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 none 0.2 0.3), rgb)} + +<===> missing/red/output.css +a { + b: rgb(0, 168.3310327198, 164.9124102862); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0.1 none 0.3), rgb)} + +<===> missing/green/output.css +a { + b: rgb(113.3463666573, 0, 175.0222017144); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0.1 0.2 none), rgb)} + +<===> missing/blue/output.css +a { + b: hsl(128.9663541465, 142.6286256266%, 23.5199973212%); +} diff --git a/spec/core_functions/color/to_space/xyz_d50/xyz-d50/srgb.hrx b/spec/core_functions/color/to_space/xyz_d50/xyz-d50/srgb.hrx new file mode 100644 index 000000000..26daa4959 --- /dev/null +++ b/spec/core_functions/color/to_space/xyz_d50/xyz-d50/srgb.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0 0 0), srgb)} + +<===> black/output.css +a { + b: color(srgb 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 1 1 1), srgb)} + +<===> white/output.css +a { + b: color(srgb 1.0113816155 0.987098648 1.1021635313); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0.5 0.5 0.5), srgb)} + +<===> gray/output.css +a { + b: color(srgb 0.7438835606 0.7256918895 0.811893154); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0.2 0.4 0.8), srgb)} + +<===> middle/output.css +a { + b: color(srgb -0.6745940796 0.7962536745 1.0204307491); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 -1 0.4 2), srgb)} + +<===> out_of_range/near/output.css +a { + b: color(srgb -1.966531269 1.2965640931 1.5277611538); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 -999999 0 0), srgb)} + +<===> out_of_range/far/output.css +a { + b: color(srgb -536.9372723682 330.5991105367 -111.3818104512); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0.1 0.2 0.3 / 0.4), srgb)} + +<===> alpha/partial/output.css +a { + b: color(srgb -0.4331043699 0.5797354156 0.6522823824 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0.1 0.2 0.3 / 0.0), srgb)} + +<===> alpha/transparent/output.css +a { + b: color(srgb -0.4331043699 0.5797354156 0.6522823824 / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 none 0.2 0.3), srgb)} + +<===> missing/red/output.css +a { + b: color(srgb none 0.6601216969 0.6467153345); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0.1 none 0.3), srgb)} + +<===> missing/green/output.css +a { + b: color(srgb 0.4444955555 none 0.6863615754); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0.1 0.2 none), srgb)} + +<===> missing/blue/output.css +a { + b: color(srgb -0.1002625161 0.5706624625 none); +} diff --git a/spec/core_functions/color/to_space/xyz_d50/xyz-d50/srgb_linear.hrx b/spec/core_functions/color/to_space/xyz_d50/xyz-d50/srgb_linear.hrx new file mode 100644 index 000000000..5531c32e2 --- /dev/null +++ b/spec/core_functions/color/to_space/xyz_d50/xyz-d50/srgb_linear.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0 0 0), srgb-linear)} + +<===> black/output.css +a { + b: color(srgb-linear 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 1 1 1), srgb-linear)} + +<===> white/output.css +a { + b: color(srgb-linear 1.026087637 0.9709017742 1.2483646679); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0.5 0.5 0.5), srgb-linear)} + +<===> gray/output.css +a { + b: color(srgb-linear 0.5130438185 0.4854508871 0.6241823339); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0.2 0.4 0.8), srgb-linear)} + +<===> middle/output.css +a { + b: color(srgb-linear -0.412657003 0.5974969544 1.0471092027); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 -1 0.4 2), srgb-linear)} + +<===> out_of_range/near/output.css +a { + b: color(srgb-linear -4.7624146879 1.8121829743 2.6472259737); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 -999999 0 0), srgb-linear)} + +<===> out_of_range/far/output.css +a { + b: color(srgb-linear -3134132.718764265 978794.4977603011 -71955.3206025548); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0.1 0.2 0.3 / 0.4), srgb-linear)} + +<===> alpha/partial/output.css +a { + b: color(srgb-linear -0.1572622797 0.2954041898 0.3830159978 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0.1 0.2 0.3 / 0.0), srgb-linear)} + +<===> alpha/transparent/output.css +a { + b: color(srgb-linear -0.1572622797 0.2954041898 0.3830159978 / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 none 0.2 0.3), srgb-linear)} + +<===> missing/red/output.css +a { + b: color(srgb-linear none 0.3932837375 0.3758204586); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0.1 none 0.3), srgb-linear)} + +<===> missing/green/output.css +a { + b: color(srgb-linear 0.1662149199 none 0.4288113498); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0.1 0.2 none), srgb-linear)} + +<===> missing/blue/output.css +a { + b: color(srgb-linear -0.0100636143 0.2853713278 none); +} diff --git a/spec/core_functions/color/to_space/xyz_d50/xyz-d50/xyz.hrx b/spec/core_functions/color/to_space/xyz_d50/xyz-d50/xyz.hrx new file mode 100644 index 000000000..25d2d2b88 --- /dev/null +++ b/spec/core_functions/color/to_space/xyz_d50/xyz-d50/xyz.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0 0 0), xyz)} + +<===> black/output.css +a { + b: color(xyz 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 1 1 1), xyz)} + +<===> white/output.css +a { + b: color(xyz 0.9956342097 1.0026671299 1.3221722918); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0.5 0.5 0.5), xyz)} + +<===> gray/output.css +a { + b: color(xyz 0.4978171049 0.501333565 0.6610861459); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0.2 0.4 0.8), xyz)} + +<===> middle/output.css +a { + b: color(xyz 0.2324626969 0.4151573703 1.0585524842); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 -1 0.4 2), xyz)} + +<===> out_of_range/near/output.css +a { + b: color(xyz -0.8381943171 0.474450751 2.6402147779); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 -999999 0 0), xyz)} + +<===> out_of_range/far/output.css +a { + b: color(xyz -955472.4660146538 28369.6809641542 -12314.0025504671); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0.1 0.2 0.3 / 0.4), xyz)} + +<===> alpha/partial/output.css +a { + b: color(xyz 0.1099054241 0.205474541 0.3962396495 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0.1 0.2 0.3 / 0.0), xyz)} + +<===> alpha/transparent/output.css +a { + b: color(xyz 0.1099054241 0.205474541 0.3962396495 / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 none 0.2 0.3), xyz)} + +<===> missing/red/output.css +a { + b: color(xyz none 0.208311512 0.395008248); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0.1 none 0.3), xyz)} + +<===> missing/green/output.css +a { + b: color(xyz 0.1145251151 none 0.4003411794); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0.1 0.2 none), xyz)} + +<===> missing/blue/output.css +a { + b: color(xyz 0.0909276512 0.1991621087 none); +} diff --git a/spec/core_functions/color/to_space/xyz_d50/xyz-d50/xyz_d50.hrx b/spec/core_functions/color/to_space/xyz_d50/xyz-d50/xyz_d50.hrx new file mode 100644 index 000000000..e6e632b18 --- /dev/null +++ b/spec/core_functions/color/to_space/xyz_d50/xyz-d50/xyz_d50.hrx @@ -0,0 +1,118 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0 0 0), xyz-d50)} + +<===> black/output.css +a { + b: color(xyz-d50 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 1 1 1), xyz-d50)} + +<===> white/output.css +a { + b: color(xyz-d50 1 1 1); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0.5 0.5 0.5), xyz-d50)} + +<===> gray/output.css +a { + b: color(xyz-d50 0.5 0.5 0.5); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0.2 0.4 0.8), xyz-d50)} + +<===> middle/output.css +a { + b: color(xyz-d50 0.2 0.4 0.8); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 -1 0.4 2), xyz-d50)} + +<===> out_of_range/near/output.css +a { + b: color(xyz-d50 -1 0.4 2); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 -999999 0 0), xyz-d50)} + +<===> out_of_range/far/output.css +a { + b: color(xyz-d50 -999999 0 0); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0.1 0.2 0.3 / 0.4), xyz-d50)} + +<===> alpha/partial/output.css +a { + b: color(xyz-d50 0.1 0.2 0.3 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0.1 0.2 0.3 / 0.0), xyz-d50)} + +<===> alpha/transparent/output.css +a { + b: color(xyz-d50 0.1 0.2 0.3 / 0); +} + +<===> +================================================================================ +<===> missing/red/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 none 0.2 0.3), xyz-d50)} + +<===> missing/red/output.css +a { + b: color(xyz-d50 none 0.2 0.3); +} + +<===> +================================================================================ +<===> missing/green/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0.1 none 0.3), xyz-d50)} + +<===> missing/green/output.css +a { + b: color(xyz-d50 0.1 none 0.3); +} + +<===> +================================================================================ +<===> missing/blue/input.scss +@use 'sass:color'; +a {b: color.to-space(color(xyz-d50 0.1 0.2 none), xyz-d50)} + +<===> missing/blue/output.css +a { + b: color(xyz-d50 0.1 0.2 none); +} From b586e6495e72cb0d7ffe31093e32e8f13929a670 Mon Sep 17 00:00:00 2001 From: Natalie Weizenbaum Date: Wed, 27 Mar 2024 12:27:43 -0700 Subject: [PATCH 05/18] [Color 4] Update existing specs per sass/sass#3819 --- spec/core_functions/color/adjust_color/hsl.hrx | 4 ++-- spec/core_functions/color/adjust_color/hwb.hrx | 8 ++++---- spec/core_functions/color/grayscale.hrx | 2 +- .../core_functions/color/hsl/one_arg/no_alpha.hrx | 6 +++--- .../color/hsl/three_args/clamped.hrx | 15 --------------- .../color/hsl/three_args/out_of_gamut.hrx | 12 ++++++++++++ spec/core_functions/color/is_in_gamut.hrx | 2 +- spec/core_functions/color/lch/no_alpha.hrx | 8 ++++---- spec/core_functions/color/mix/error.hrx | 4 ++-- .../color/mix/hue_interpolation.hrx | 2 +- spec/core_functions/color/mix/mixed_spaces.hrx | 2 +- spec/core_functions/color/mix/predefined.hrx | 4 ++-- spec/core_functions/color/oklch/no_alpha.hrx | 8 ++++---- spec/libsass/color-functions/rgb/rgb/b.hrx | 8 ++++---- spec/libsass/color-functions/rgb/rgb/g.hrx | 8 ++++---- spec/libsass/color-functions/rgb/rgb/r.hrx | 8 ++++---- spec/libsass/color-functions/rgb/rgba/b.hrx | 8 ++++---- spec/libsass/color-functions/rgb/rgba/g.hrx | 8 ++++---- spec/libsass/color-functions/rgb/rgba/r.hrx | 8 ++++---- spec/non_conformant/colors/basic.hrx | 2 +- 20 files changed, 62 insertions(+), 65 deletions(-) create mode 100644 spec/core_functions/color/hsl/three_args/out_of_gamut.hrx diff --git a/spec/core_functions/color/adjust_color/hsl.hrx b/spec/core_functions/color/adjust_color/hsl.hrx index b2fdf41ad..d906834f6 100644 --- a/spec/core_functions/color/adjust_color/hsl.hrx +++ b/spec/core_functions/color/adjust_color/hsl.hrx @@ -88,7 +88,7 @@ a {b: adjust-color(plum, $saturation: 100%)} <===> saturation/max/output.css a { - b: #ff7eff; + b: hsl(300, 147.2868217054%, 74.7058823529%); } <===> @@ -98,7 +98,7 @@ a {b: adjust-color(plum, $saturation: 53%)} <===> saturation/max_remaining/output.css a { - b: #ff7eff; + b: hsl(300, 100.2868217054%, 74.7058823529%); } <===> diff --git a/spec/core_functions/color/adjust_color/hwb.hrx b/spec/core_functions/color/adjust_color/hwb.hrx index 2777269cb..5a5ea4e66 100644 --- a/spec/core_functions/color/adjust_color/hwb.hrx +++ b/spec/core_functions/color/adjust_color/hwb.hrx @@ -10,7 +10,7 @@ a {b: adjust-color(#cc6666, $whiteness: 100%)} <===> whiteness/max/output.css a { - b: rgb(212.5, 212.5, 212.5); + b: rgb(223.125, 223.125, 223.125); } <===> @@ -40,7 +40,7 @@ a {b: adjust-color(#cc6666, $whiteness: -100%)} <===> whiteness/min/output.css a { - b: #cc0000; + b: hsl(0, 700%, 10%); } <===> @@ -80,7 +80,7 @@ a {b: adjust-color(#993333, $blackness: 100%)} <===> blackness/max/output.css a { - b: rgb(42.5, 42.5, 42.5); + b: rgb(31.875, 31.875, 31.875); } <===> @@ -110,7 +110,7 @@ a {b: adjust-color(#993333, $blackness: -100%)} <===> blackness/min/output.css a { - b: #ff3333; + b: hsl(0, 700%, 90%); } <===> diff --git a/spec/core_functions/color/grayscale.hrx b/spec/core_functions/color/grayscale.hrx index ef3a481df..8347763bd 100644 --- a/spec/core_functions/color/grayscale.hrx +++ b/spec/core_functions/color/grayscale.hrx @@ -117,7 +117,7 @@ a {b: grayscale(lch(54.3 107 40.9))} <===> non_legacy/polar/output.css a { - b: lch(56.854581217% 0.0000089094 270.4698997617deg); + b: lch(56.854581217% 0.0000089094 270.4699001175deg); } <===> 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 e175a51c1..88c65610e 100644 --- a/spec/core_functions/color/hsl/one_arg/no_alpha.hrx +++ b/spec/core_functions/color/hsl/one_arg/no_alpha.hrx @@ -28,12 +28,12 @@ a { <===> ================================================================================ -<===> clamped/saturation/above/input.scss +<===> out_of_gamut/saturation/above/input.scss a {b: hsl(0 500% 50%)} -<===> clamped/saturation/above/output.css +<===> out_of_gamut/saturation/above/output.css a { - b: hsl(0, 100%, 50%); + b: hsl(0, 500%, 50%); } <===> diff --git a/spec/core_functions/color/hsl/three_args/clamped.hrx b/spec/core_functions/color/hsl/three_args/clamped.hrx index f43ba9419..14eaef5b5 100644 --- a/spec/core_functions/color/hsl/three_args/clamped.hrx +++ b/spec/core_functions/color/hsl/three_args/clamped.hrx @@ -1,21 +1,6 @@ <===> README.md The W3C tests cover clamped hue, but not clamped saturation or lightness. -<===> -================================================================================ -<===> saturation/above/input.scss -a {b: hsl(0, 500%, 50%)} - -<===> saturation/above/output.css -a { - b: hsl(0, 100%, 50%); -} - -<===> saturation/above/output-libsass.css -a { - b: red; -} - <===> ================================================================================ <===> saturation/below/input.scss diff --git a/spec/core_functions/color/hsl/three_args/out_of_gamut.hrx b/spec/core_functions/color/hsl/three_args/out_of_gamut.hrx new file mode 100644 index 000000000..bed3d2b75 --- /dev/null +++ b/spec/core_functions/color/hsl/three_args/out_of_gamut.hrx @@ -0,0 +1,12 @@ +<===> saturation/above/input.scss +a {b: hsl(0, 500%, 50%)} + +<===> saturation/above/output.css +a { + b: hsl(0, 500%, 50%); +} + +<===> saturation/above/output-libsass.css +a { + b: red; +} diff --git a/spec/core_functions/color/is_in_gamut.hrx b/spec/core_functions/color/is_in_gamut.hrx index c572e479f..aad9e9116 100644 --- a/spec/core_functions/color/is_in_gamut.hrx +++ b/spec/core_functions/color/is_in_gamut.hrx @@ -242,7 +242,7 @@ a {b: color.is-in-gamut(color(display-p3 1 1 0), hwb)} <===> wide_narrow/output.css a { - b: true; + b: false; } <===> diff --git a/spec/core_functions/color/lch/no_alpha.hrx b/spec/core_functions/color/lch/no_alpha.hrx index a13d4e629..8d01279b8 100644 --- a/spec/core_functions/color/lch/no_alpha.hrx +++ b/spec/core_functions/color/lch/no_alpha.hrx @@ -56,9 +56,9 @@ a { <===> unitless/chroma/below_range/output.css a { - value: lch(1% -0.1 3deg); + value: lch(1% 0 3deg); space: lch; - channels: 1% -0.1 3deg / 1; + channels: 1% 0 3deg / 1; } <===> @@ -147,9 +147,9 @@ a { <===> percent/chroma/below_range/output.css a { - value: lch(1% -1.5 3deg); + value: lch(1% 0 3deg); space: lch; - channels: 1% -1.5 3deg / 1; + channels: 1% 0 3deg / 1; } <===> diff --git a/spec/core_functions/color/mix/error.hrx b/spec/core_functions/color/mix/error.hrx index 5dd3bf81a..a4e312784 100644 --- a/spec/core_functions/color/mix/error.hrx +++ b/spec/core_functions/color/mix/error.hrx @@ -48,7 +48,7 @@ Error: Missing argument $color2. a {b: mix(lch(20% -20 0), red)} <===> null_method/non_legacy/color1/error -Error: $color1: To use color.mix() with non-legacy color lch(20% -20 0deg), you must provide a $method. +Error: $color1: To use color.mix() with non-legacy color lch(20% 0 0deg), you must provide a $method. , 1 | a {b: mix(lch(20% -20 0), red)} | ^^^^^^^^^^^^^^^^^^^^^^^^ @@ -65,7 +65,7 @@ Error: $color1: To use color.mix() with non-legacy color lch(20% -20 0deg), you a {b: mix(red, lch(20% -20 0))} <===> null_method/non_legacy/color2/error -Error: $color2: To use color.mix() with non-legacy color lch(20% -20 0deg), you must provide a $method. +Error: $color2: To use color.mix() with non-legacy color lch(20% 0 0deg), you must provide a $method. , 1 | a {b: mix(red, lch(20% -20 0))} | ^^^^^^^^^^^^^^^^^^^^^^^^ diff --git a/spec/core_functions/color/mix/hue_interpolation.hrx b/spec/core_functions/color/mix/hue_interpolation.hrx index b7b74beb1..e29881216 100644 --- a/spec/core_functions/color/mix/hue_interpolation.hrx +++ b/spec/core_functions/color/mix/hue_interpolation.hrx @@ -19,5 +19,5 @@ a {b: mix(red, green, 20%, lch increasing hue)} <===> increasing/weighted/output.css a { - b: rgb(75.3627215695, 127.0940173535, -38.3383580918); + b: hsl(78.7622147036, 186.3907911016%, 17.4030704435%); } diff --git a/spec/core_functions/color/mix/mixed_spaces.hrx b/spec/core_functions/color/mix/mixed_spaces.hrx index 106e6e950..21b19a1d7 100644 --- a/spec/core_functions/color/mix/mixed_spaces.hrx +++ b/spec/core_functions/color/mix/mixed_spaces.hrx @@ -7,5 +7,5 @@ a {b: mix(hsl(0 100% 50%), green, $method: lch)} <===> output.css a { - b: hsl(50.9351301875, 100%, 19.0269267557%); + b: hsl(50.9351301875, 199.2813015981%, 19.0269267557%); } diff --git a/spec/core_functions/color/mix/predefined.hrx b/spec/core_functions/color/mix/predefined.hrx index 4e1f23b30..b72035875 100644 --- a/spec/core_functions/color/mix/predefined.hrx +++ b/spec/core_functions/color/mix/predefined.hrx @@ -19,7 +19,7 @@ a {b: mix(color(display-p3 1 0 0), color(display-p3 0 1 0), 60%, $method: hsl)} <===> rgb_explicit_method/output.css a { - b: color(display-p3 0.7013873656 0.5957461134 0.1914381849); + b: color(display-p3 1.0849635599 0.8595336595 -0.252822726); } <===> @@ -39,5 +39,5 @@ a {b: mix(color(xyz-d50 0.15 0.24 0), color(xyz-d65 1 .2 0), $method: hwb)} <===> xyz_explicit_method/output.css a { - b: color(xyz-d50 0.3073003061 0.2185751869 0.0198783275); + b: color(xyz-d50 0.5250037958 0.2975068714 -0.1396614468); } diff --git a/spec/core_functions/color/oklch/no_alpha.hrx b/spec/core_functions/color/oklch/no_alpha.hrx index 478b6cc76..2c8c27848 100644 --- a/spec/core_functions/color/oklch/no_alpha.hrx +++ b/spec/core_functions/color/oklch/no_alpha.hrx @@ -56,9 +56,9 @@ a { <===> unitless/chroma/below_range/output.css a { - value: oklch(1% -0.1 3deg); + value: oklch(1% 0 3deg); space: oklch; - channels: 1% -0.1 3deg / 1; + channels: 1% 0 3deg / 1; } <===> @@ -147,9 +147,9 @@ a { <===> percent/chroma/below_range/output.css a { - value: oklch(1% -0.004 3deg); + value: oklch(1% 0 3deg); space: oklch; - channels: 1% -0.004 3deg / 1; + channels: 1% 0 3deg / 1; } <===> diff --git a/spec/libsass/color-functions/rgb/rgb/b.hrx b/spec/libsass/color-functions/rgb/rgb/b.hrx index bb1eb123a..10e33f443 100644 --- a/spec/libsass/color-functions/rgb/rgb/b.hrx +++ b/spec/libsass/color-functions/rgb/rgb/b.hrx @@ -368,7 +368,7 @@ foo { <===> output.css foo { - c-1: rgb(0, 0, -1); + c-1: hsl(240, 100%, -0.1960784314%); c0: rgb(0, 0, 0); c1: rgb(0, 0, 1); c2: rgb(0, 0, 2); @@ -625,11 +625,11 @@ foo { c253: rgb(0, 0, 253); c254: rgb(0, 0, 254); c255: rgb(0, 0, 255); - c256: rgb(0, 0, 256); + c256: hsl(240, 100.7874015748%, 50.1960784314%); } foo { - c-1: rgb(0, 0, -2.55); + c-1: hsl(240, 100%, -0.5%); c0: rgb(0, 0, 0); c1: rgb(0, 0, 2.55); c2: rgb(0, 0, 5.1); @@ -731,7 +731,7 @@ foo { c98: rgb(0, 0, 249.9); c99: rgb(0, 0, 252.45); c100: rgb(0, 0, 255); - c101: rgb(0, 0, 257.55); + c101: hsl(240, 102.0202020202%, 50.5%); } <===> output-libsass.css diff --git a/spec/libsass/color-functions/rgb/rgb/g.hrx b/spec/libsass/color-functions/rgb/rgb/g.hrx index 9b53794a4..10055b401 100644 --- a/spec/libsass/color-functions/rgb/rgb/g.hrx +++ b/spec/libsass/color-functions/rgb/rgb/g.hrx @@ -368,7 +368,7 @@ foo { <===> output.css foo { - c-1: rgb(0, -1, 0); + c-1: hsl(120, 100%, -0.1960784314%); c0: rgb(0, 0, 0); c1: rgb(0, 1, 0); c2: rgb(0, 2, 0); @@ -625,11 +625,11 @@ foo { c253: rgb(0, 253, 0); c254: rgb(0, 254, 0); c255: rgb(0, 255, 0); - c256: rgb(0, 256, 0); + c256: hsl(120, 100.7874015748%, 50.1960784314%); } foo { - c-1: rgb(0, -2.55, 0); + c-1: hsl(120, 100%, -0.5%); c0: rgb(0, 0, 0); c1: rgb(0, 2.55, 0); c2: rgb(0, 5.1, 0); @@ -731,7 +731,7 @@ foo { c98: rgb(0, 249.9, 0); c99: rgb(0, 252.45, 0); c100: rgb(0, 255, 0); - c101: rgb(0, 257.55, 0); + c101: hsl(120, 102.0202020202%, 50.5%); } <===> output-libsass.css diff --git a/spec/libsass/color-functions/rgb/rgb/r.hrx b/spec/libsass/color-functions/rgb/rgb/r.hrx index 6a5212d66..0419fdaf6 100644 --- a/spec/libsass/color-functions/rgb/rgb/r.hrx +++ b/spec/libsass/color-functions/rgb/rgb/r.hrx @@ -368,7 +368,7 @@ foo { <===> output.css foo { - c-1: rgb(0, -1, 0); + c-1: hsl(120, 100%, -0.1960784314%); c0: rgb(0, 0, 0); c1: rgb(0, 1, 0); c2: rgb(0, 2, 0); @@ -625,11 +625,11 @@ foo { c253: rgb(0, 253, 0); c254: rgb(0, 254, 0); c255: rgb(0, 255, 0); - c256: rgb(0, 256, 0); + c256: hsl(120, 100.7874015748%, 50.1960784314%); } foo { - c-1: rgb(-2.55, 0, 0); + c-1: hsl(0, 100%, -0.5%); c0: rgb(0, 0, 0); c1: rgb(2.55, 0, 0); c2: rgb(5.1, 0, 0); @@ -731,7 +731,7 @@ foo { c98: rgb(249.9, 0, 0); c99: rgb(252.45, 0, 0); c100: rgb(255, 0, 0); - c101: rgb(257.55, 0, 0); + c101: hsl(0, 102.0202020202%, 50.5%); } <===> output-libsass.css diff --git a/spec/libsass/color-functions/rgb/rgba/b.hrx b/spec/libsass/color-functions/rgb/rgba/b.hrx index f816c9921..74057cb37 100644 --- a/spec/libsass/color-functions/rgb/rgba/b.hrx +++ b/spec/libsass/color-functions/rgb/rgba/b.hrx @@ -368,7 +368,7 @@ foo { <===> output.css foo { - c-1: rgb(0, 0, -1); + c-1: hsl(240, 100%, -0.1960784314%); c0: rgb(0, 0, 0); c1: rgb(0, 0, 1); c2: rgb(0, 0, 2); @@ -625,11 +625,11 @@ foo { c253: rgb(0, 0, 253); c254: rgb(0, 0, 254); c255: rgb(0, 0, 255); - c256: rgb(0, 0, 256); + c256: hsl(240, 100.7874015748%, 50.1960784314%); } foo { - c-1: rgb(0, 0, -2.55); + c-1: hsl(240, 100%, -0.5%); c0: rgb(0, 0, 0); c1: rgb(0, 0, 2.55); c2: rgb(0, 0, 5.1); @@ -731,7 +731,7 @@ foo { c98: rgb(0, 0, 249.9); c99: rgb(0, 0, 252.45); c100: rgb(0, 0, 255); - c101: rgb(0, 0, 257.55); + c101: hsl(240, 102.0202020202%, 50.5%); } <===> output-libsass.css diff --git a/spec/libsass/color-functions/rgb/rgba/g.hrx b/spec/libsass/color-functions/rgb/rgba/g.hrx index 16d61c5d1..c24bd4894 100644 --- a/spec/libsass/color-functions/rgb/rgba/g.hrx +++ b/spec/libsass/color-functions/rgb/rgba/g.hrx @@ -368,7 +368,7 @@ foo { <===> output.css foo { - c-1: rgb(0, -1, 0); + c-1: hsl(120, 100%, -0.1960784314%); c0: rgb(0, 0, 0); c1: rgb(0, 1, 0); c2: rgb(0, 2, 0); @@ -625,11 +625,11 @@ foo { c253: rgb(0, 253, 0); c254: rgb(0, 254, 0); c255: rgb(0, 255, 0); - c256: rgb(0, 256, 0); + c256: hsl(120, 100.7874015748%, 50.1960784314%); } foo { - c-1: rgb(0, -2.55, 0); + c-1: hsl(120, 100%, -0.5%); c0: rgb(0, 0, 0); c1: rgb(0, 2.55, 0); c2: rgb(0, 5.1, 0); @@ -731,7 +731,7 @@ foo { c98: rgb(0, 249.9, 0); c99: rgb(0, 252.45, 0); c100: rgb(0, 255, 0); - c101: rgb(0, 257.55, 0); + c101: hsl(120, 102.0202020202%, 50.5%); } <===> output-libsass.css diff --git a/spec/libsass/color-functions/rgb/rgba/r.hrx b/spec/libsass/color-functions/rgb/rgba/r.hrx index 2d2220b59..a819243e1 100644 --- a/spec/libsass/color-functions/rgb/rgba/r.hrx +++ b/spec/libsass/color-functions/rgb/rgba/r.hrx @@ -368,7 +368,7 @@ foo { <===> output.css foo { - c-1: rgb(0, -1, 0); + c-1: hsl(120, 100%, -0.1960784314%); c0: rgb(0, 0, 0); c1: rgb(0, 1, 0); c2: rgb(0, 2, 0); @@ -625,11 +625,11 @@ foo { c253: rgb(0, 253, 0); c254: rgb(0, 254, 0); c255: rgb(0, 255, 0); - c256: rgb(0, 256, 0); + c256: hsl(120, 100.7874015748%, 50.1960784314%); } foo { - c-1: rgb(-2.55, 0, 0); + c-1: hsl(0, 100%, -0.5%); c0: rgb(0, 0, 0); c1: rgb(2.55, 0, 0); c2: rgb(5.1, 0, 0); @@ -731,7 +731,7 @@ foo { c98: rgb(249.9, 0, 0); c99: rgb(252.45, 0, 0); c100: rgb(255, 0, 0); - c101: rgb(257.55, 0, 0); + c101: hsl(0, 102.0202020202%, 50.5%); } <===> output-libsass.css diff --git a/spec/non_conformant/colors/basic.hrx b/spec/non_conformant/colors/basic.hrx index 7c2f22b9b..6046cd0ca 100644 --- a/spec/non_conformant/colors/basic.hrx +++ b/spec/non_conformant/colors/basic.hrx @@ -14,7 +14,7 @@ p { color: red green blue; color: redhux; color: redgreen; - foo: rgb(200, 382.5, 433.5); + foo: hsl(13.1049250535, 189.0688259109%, 124.2156862745%); } <===> output-libsass.css From 1ac63148cb7e4682c78ffb149cb1b457a8d39994 Mon Sep 17 00:00:00 2001 From: Natalie Weizenbaum Date: Thu, 28 Mar 2024 16:52:42 -0700 Subject: [PATCH 06/18] Fix some color JS tests --- .../value/color/color-4-channels.test.ts | 292 ++++++++++-------- .../value/color/color-4-spaces.test.ts | 26 -- js-api-spec/value/color/legacy.test.ts | 96 +++--- js-api-spec/value/color/spaces.ts | 12 +- 4 files changed, 213 insertions(+), 213 deletions(-) diff --git a/js-api-spec/value/color/color-4-channels.test.ts b/js-api-spec/value/color/color-4-channels.test.ts index ac0e3dc85..9bcdee6b9 100644 --- a/js-api-spec/value/color/color-4-channels.test.ts +++ b/js-api-spec/value/color/color-4-channels.test.ts @@ -10,7 +10,6 @@ import {List} from 'immutable'; import {spaces} from './spaces'; import {channelCases, channelNames} from './utils'; -import {skipForImpl} from '../../utils'; const spaceNames = Object.keys(spaces) as KnownColorSpace[]; @@ -161,148 +160,171 @@ describe('Color 4 SassColor Channels', () => { }); }); - // TODO(sass#3654) Failing in dart-sass pending: - // https://github.com/sass/sass/issues/3654 - skipForImpl('dart-sass', () => { + if (!['hsl', 'hwb', 'lch', 'oklch'].includes(spaceId)) { describe('isChannelPowerless', () => { - function checkPowerless( - _color: SassColor, - powerless = [false, false, false] - ) { - it(`channels ${_color.channels.toArray()} is ${powerless}`, () => { - expect(_color.isChannelPowerless(space.channels[0])).toBe( - powerless[0] - ); - expect(_color.isChannelPowerless(space.channels[1])).toBe( - powerless[1] - ); - expect(_color.isChannelPowerless(space.channels[2])).toBe( - powerless[2] - ); - }); - } - const [ch1, ch2, ch3] = space.ranges; - if (space.hasPowerless) { - // test powerless channels - switch (space.name) { - case 'hwb': - // If the combined `whiteness` and `blackness` values (after - // normalization) are equal to `100%`, then the `hue` channel is - // powerless. - checkPowerless(space.constructor(ch1[0], 0, 100), [ - true, - false, - false, - ]); - checkPowerless(space.constructor(ch1[0], 100, 0), [ - true, - false, - false, - ]); - checkPowerless(space.constructor(ch1[0], 50, 50), [ - true, - false, - false, - ]); - checkPowerless(space.constructor(ch1[1], 0, 100), [ - true, - false, - false, - ]); - checkPowerless(space.constructor(ch1[1], 100, 0), [ - true, - false, - false, - ]); - checkPowerless(space.constructor(ch1[1], 50, 50), [ - true, - false, - false, - ]); + const [range1, range2, range3] = space.ranges; + checkPowerless(space.constructor(range1[0], range2[0], range3[0])); + checkPowerless(space.constructor(range1[1], range2[0], range3[0])); + checkPowerless(space.constructor(range1[1], range2[1], range3[0])); + checkPowerless(space.constructor(range1[1], range2[1], range3[1])); + checkPowerless(space.constructor(range1[0], range2[1], range3[1])); + checkPowerless(space.constructor(range1[0], range2[0], range3[1])); + checkPowerless(space.constructor(range1[1], range2[0], range3[1])); + checkPowerless(space.constructor(range1[0], range2[1], range3[0])); + }); + } + }); + }); - checkPowerless(space.constructor(ch1[0], ch2[1], ch3[1])); - checkPowerless(space.constructor(ch1[0], ch2[0], ch3[0])); - checkPowerless(space.constructor(ch1[1], ch2[1], ch3[1])); - checkPowerless(space.constructor(ch1[1], ch2[0], ch3[0])); + describe('isChannelPowerless', () => { + describe('for HWB', () => { + // If the combined `whiteness + blackness` is great than or equal to + // `100%`, then the `hue` channel is powerless. + checkPowerless( + new SassColor({hue: 0, whiteness: 0, blackness: 100, space: 'hwb'}), + [true, false, false] + ); + checkPowerless( + new SassColor({hue: 0, whiteness: 100, blackness: 0, space: 'hwb'}), + [true, false, false] + ); + checkPowerless( + new SassColor({hue: 0, whiteness: 50, blackness: 50, space: 'hwb'}), + [true, false, false] + ); + checkPowerless( + new SassColor({hue: 0, whiteness: 60, blackness: 60, space: 'hwb'}), + [true, false, false] + ); + checkPowerless( + new SassColor({hue: 0, whiteness: -100, blackness: 200, space: 'hwb'}), + [true, false, false] + ); + checkPowerless( + new SassColor({hue: 0, whiteness: 200, blackness: -100, space: 'hwb'}), + [true, false, false] + ); + checkPowerless( + new SassColor({hue: 100, whiteness: 0, blackness: 100, space: 'hwb'}), + [true, false, false] + ); - break; + checkPowerless( + new SassColor({hue: 0, whiteness: 0, blackness: 0, space: 'hwb'}) + ); + checkPowerless( + new SassColor({hue: 0, whiteness: 49, blackness: 50, space: 'hwb'}) + ); + checkPowerless( + new SassColor({hue: 0, whiteness: -1, blackness: 100, space: 'hwb'}) + ); + checkPowerless( + new SassColor({hue: 100, whiteness: 0, blackness: 0, space: 'hwb'}) + ); + }); - case 'hsl': - // hsl- If the saturation of an HSL color is 0%, then the hue component is powerless. - checkPowerless(space.constructor(ch1[0], 0, ch3[0]), [ - true, - false, - false, - ]); - checkPowerless(space.constructor(ch1[0], 0, ch3[1]), [ - true, - false, - false, - ]); - checkPowerless(space.constructor(ch1[1], 0, ch3[1]), [ - true, - false, - false, - ]); - checkPowerless(space.constructor(ch1[1], 0, ch3[0]), [ - true, - false, - false, - ]); + describe('for HSL', () => { + // If the saturation of an HSL color is 0%, then the hue component is + // powerless. + checkPowerless( + new SassColor({hue: 0, saturation: 0, lightness: 0, space: 'hsl'}), + [true, false, false] + ); + checkPowerless( + new SassColor({hue: 0, saturation: 0, lightness: 100, space: 'hsl'}), + [true, false, false] + ); + checkPowerless( + new SassColor({hue: 100, saturation: 0, lightness: 0, space: 'hsl'}), + [true, false, false] + ); - checkPowerless(space.constructor(ch1[0], ch2[1], ch3[0])); - checkPowerless(space.constructor(ch1[0], ch2[1], ch3[1])); - checkPowerless(space.constructor(ch1[1], ch2[1], ch3[1])); - checkPowerless(space.constructor(ch1[1], ch2[1], ch3[0])); - break; + checkPowerless( + new SassColor({hue: 0, saturation: 100, lightness: 0, space: 'hsl'}) + ); + checkPowerless( + new SassColor({hue: 0, saturation: 100, lightness: 100, space: 'hsl'}) + ); + checkPowerless( + new SassColor({hue: 100, saturation: 100, lightness: 100, space: 'hsl'}) + ); + checkPowerless( + new SassColor({hue: 100, saturation: 100, lightness: 0, space: 'hsl'}) + ); + }); - case 'lch': - case 'oklch': - // (ok)lch- If the `chroma` value is 0%, then the `hue` channel is powerless. - checkPowerless(space.constructor(ch1[0], 0, ch3[0]), [ - false, - false, - true, - ]); - checkPowerless(space.constructor(ch1[0], 0, ch3[1]), [ - false, - false, - true, - ]); - checkPowerless(space.constructor(ch1[1], 0, ch3[1]), [ - false, - false, - true, - ]); - checkPowerless(space.constructor(ch1[1], 0, ch3[0]), [ - false, - false, - true, - ]); + describe('for LCH', () => { + // If the `chroma` value is 0%, then the `hue` channel is powerless. + checkPowerless( + new SassColor({lightness: 0, chroma: 0, hue: 0, space: 'lch'}), + [false, false, true] + ); + checkPowerless( + new SassColor({lightness: 0, chroma: 0, hue: 100, space: 'lch'}), + [false, false, true] + ); + checkPowerless( + new SassColor({lightness: 100, chroma: 0, hue: 0, space: 'lch'}), + [false, false, true] + ); - checkPowerless(space.constructor(ch1[0], ch2[1], ch3[0])); - checkPowerless(space.constructor(ch1[0], ch2[1], ch3[1])); - checkPowerless(space.constructor(ch1[1], ch2[1], ch3[1])); - checkPowerless(space.constructor(ch1[1], ch2[1], ch3[0])); - break; + checkPowerless( + new SassColor({lightness: 0, chroma: 100, hue: 0, space: 'lch'}) + ); + checkPowerless( + new SassColor({lightness: 0, chroma: 100, hue: 100, space: 'lch'}) + ); + checkPowerless( + new SassColor({lightness: 100, chroma: 100, hue: 100, space: 'lch'}) + ); + checkPowerless( + new SassColor({lightness: 100, chroma: 100, hue: 0, space: 'lch'}) + ); + }); - default: - throw new Error( - `Unimplemented isPowerless check for ${space.name}` - ); - } - } else { - checkPowerless(space.constructor(ch1[0], ch2[0], ch3[0])); - checkPowerless(space.constructor(ch1[1], ch2[0], ch3[0])); - checkPowerless(space.constructor(ch1[1], ch2[1], ch3[0])); - checkPowerless(space.constructor(ch1[1], ch2[1], ch3[1])); - checkPowerless(space.constructor(ch1[0], ch2[1], ch3[1])); - checkPowerless(space.constructor(ch1[0], ch2[0], ch3[1])); - checkPowerless(space.constructor(ch1[1], ch2[0], ch3[1])); - checkPowerless(space.constructor(ch1[0], ch2[1], ch3[0])); - } - }); - }); + describe('for OKLCH', () => { + // If the `chroma` value is 0%, then the `hue` channel is powerless. + checkPowerless( + new SassColor({lightness: 0, chroma: 0, hue: 0, space: 'oklch'}), + [false, false, true] + ); + checkPowerless( + new SassColor({lightness: 0, chroma: 0, hue: 100, space: 'oklch'}), + [false, false, true] + ); + checkPowerless( + new SassColor({lightness: 100, chroma: 0, hue: 0, space: 'oklch'}), + [false, false, true] + ); + + checkPowerless( + new SassColor({lightness: 0, chroma: 100, hue: 0, space: 'oklch'}) + ); + checkPowerless( + new SassColor({lightness: 0, chroma: 100, hue: 100, space: 'oklch'}) + ); + checkPowerless( + new SassColor({lightness: 100, chroma: 100, hue: 100, space: 'oklch'}) + ); + checkPowerless( + new SassColor({lightness: 100, chroma: 100, hue: 0, space: 'oklch'}) + ); }); }); }); + +/** + * Creates a test that checks that the powerless channels in `color` match the + * expectation in `powerless`. + */ +function checkPowerless( + color: SassColor, + powerless = [false, false, false] +): void { + it(`${color}: ${powerless}`, () => { + const space = spaces[color.space]!; + expect(color.isChannelPowerless(space.channels[0])).toBe(powerless[0]); + expect(color.isChannelPowerless(space.channels[1])).toBe(powerless[1]); + expect(color.isChannelPowerless(space.channels[2])).toBe(powerless[2]); + }); +} diff --git a/js-api-spec/value/color/color-4-spaces.test.ts b/js-api-spec/value/color/color-4-spaces.test.ts index b83e9c2f7..195942983 100644 --- a/js-api-spec/value/color/color-4-spaces.test.ts +++ b/js-api-spec/value/color/color-4-spaces.test.ts @@ -8,7 +8,6 @@ import {Value, SassColor} from 'sass'; import type {KnownColorSpace} from 'sass'; import {spaces} from './spaces'; -import {skipForImpl} from '../../utils'; const spaceNames = Object.keys(spaces) as KnownColorSpace[]; @@ -51,31 +50,6 @@ describe('Color 4 SassColors Spaces', () => { space.constructor(...space.pink, 1.1); }).toThrow(); }); - - if (space.channels.includes('lightness')) { - describe('out of range lightness', () => { - it('throws on negative lightness', () => { - const index = space.channels.findIndex( - channel => channel === 'lightness' - ); - const channels = [...space.pink] as [number, number, number]; - channels[index] = -1; - expect(() => space.constructor(...channels)).toThrow(); - }); - - // TODO: Failing for oklab and oklch in dart-sass - skipForImpl('dart-sass', () => { - it('throws on lightness higher than bounds', () => { - const index = space.channels.findIndex( - channel => channel === 'lightness' - ); - const channels = [...space.pink] as [number, number, number]; - channels[index] = space.ranges[index][1] + 1; - expect(() => space.constructor(...channels)).toThrow(); - }); - }); - }); - } }); it(`returns name for ${space.name}`, () => { diff --git a/js-api-spec/value/color/legacy.test.ts b/js-api-spec/value/color/legacy.test.ts index b07e420fc..a64484973 100644 --- a/js-api-spec/value/color/legacy.test.ts +++ b/js-api-spec/value/color/legacy.test.ts @@ -3,7 +3,7 @@ // https://opensource.org/licenses/MIT. import {Value, SassColor} from 'sass'; -import {captureStdio, skipForImpl} from '../../utils'; +import {captureStdio} from '../../utils'; import {legacyRGB, legacyHsl, legacyHwb} from './constructors'; describe('Legacy SassColor', () => { @@ -46,7 +46,7 @@ describe('Legacy SassColor', () => { expect(() => legacyRGB(0, 0, 0, 1.1)).toThrow(); }); - it('allows out of range values which were invalid before color 4', () => { + it('allows out-of-gamut values which were invalid before color 4', () => { expect(() => legacyRGB(-1, 0, 0, 0)).not.toThrow(); expect(() => legacyRGB(0, -1, 0, 0)).not.toThrow(); expect(() => legacyRGB(0, 0, -1, 0)).not.toThrow(); @@ -71,18 +71,21 @@ describe('Legacy SassColor', () => { }); expect(stdio.err).toMatch('null-alpha'); }); + it("doesn't warn for undefined alpha and no space", () => { const stdio = captureStdio(() => { new SassColor({red: 1, green: 1, blue: 1, alpha: undefined}); }); expect(stdio.err).toBeEmptyString(); }); + it("doesn't warn for no alpha and no space", () => { const stdio = captureStdio(() => { new SassColor({red: 1, green: 1, blue: 1}); }); expect(stdio.err).toBeEmptyString(); }); + it("doesn't warn for undefined alpha and undefined space", () => { const stdio = captureStdio(() => { new SassColor({ @@ -95,6 +98,7 @@ describe('Legacy SassColor', () => { }); expect(stdio.err).toBeEmptyString(); }); + it("doesn't warn for null alpha with space", () => { const stdio = captureStdio(() => { new SassColor({ @@ -111,20 +115,17 @@ describe('Legacy SassColor', () => { }); describe('hsl()', () => { - // TODO: Failing in dart-sass because saturation should not be clamped - skipForImpl('dart-sass', () => { - it('allows valid values', () => { - expect(() => legacyHsl(0, 0, 0, 0)).not.toThrow(); - expect(() => legacyHsl(4320, 100, 100, 1)).not.toThrow(); - expect(() => legacyHsl(0, -0.1, 0, 0)).not.toThrow(); - expect(() => legacyHsl(0, 100.1, 0, 0)).not.toThrow(); - }); + it('allows valid values', () => { + expect(() => legacyHsl(0, 0, 0, 0)).not.toThrow(); + expect(() => legacyHsl(4320, 100, 100, 1)).not.toThrow(); + expect(() => legacyHsl(0, -0.1, 0, 0)).not.toThrow(); + expect(() => legacyHsl(0, 100.1, 0, 0)).not.toThrow(); + expect(() => legacyHsl(0, 0, -0.1, 0)).not.toThrow(); + expect(() => legacyHsl(0, 0, 100.1, 0)).not.toThrow(); }); - it('disallows invalid values', () => { - expect(() => legacyHsl(0, 0, -0.1, 0)).toThrow(); + it('disallows invalid alpha values', () => { expect(() => legacyHsl(0, 0, 0, -0.1)).toThrow(); - expect(() => legacyHsl(0, 0, 100.1, 0)).toThrow(); expect(() => legacyHsl(0, 0, 0, 1.1)).toThrow(); }); @@ -135,6 +136,7 @@ describe('Legacy SassColor', () => { }); expect(stdio.err).toMatch('null-alpha'); }); + it("doesn't warn for undefined alpha and no space", () => { const stdio = captureStdio(() => { new SassColor({ @@ -146,12 +148,14 @@ describe('Legacy SassColor', () => { }); expect(stdio.err).toBeEmptyString(); }); + it("doesn't warn for no alpha and no space", () => { const stdio = captureStdio(() => { new SassColor({hue: 1, saturation: 1, lightness: 1}); }); expect(stdio.err).toBeEmptyString(); }); + it("doesn't warn for undefined alpha and undefined space", () => { const stdio = captureStdio(() => { new SassColor({ @@ -164,6 +168,7 @@ describe('Legacy SassColor', () => { }); expect(stdio.err).toBeEmptyString(); }); + it("doesn't warn for null alpha with space", () => { const stdio = captureStdio(() => { new SassColor({ @@ -180,20 +185,16 @@ describe('Legacy SassColor', () => { }); describe('hwb()', () => { - // TODO: Failing in dart-sass because whiteness and blackness should not - // be clamped - skipForImpl('dart-sass', () => { - it('allows valid values', () => { - expect(() => legacyHwb(0, 0, 0, 0)).not.toThrow(); - expect(() => legacyHwb(4320, 100, 100, 1)).not.toThrow(); - expect(() => legacyHwb(0, -0.1, 0, 0)).not.toThrow(); - expect(() => legacyHwb(0, 0, -0.1, 0)).not.toThrow(); - expect(() => legacyHwb(0, 100.1, 0, 0)).not.toThrow(); - expect(() => legacyHwb(0, 0, 100.1, 0)).not.toThrow(); - }); + it('allows valid values', () => { + expect(() => legacyHwb(0, 0, 0, 0)).not.toThrow(); + expect(() => legacyHwb(4320, 100, 100, 1)).not.toThrow(); + expect(() => legacyHwb(0, -0.1, 0, 0)).not.toThrow(); + expect(() => legacyHwb(0, 0, -0.1, 0)).not.toThrow(); + expect(() => legacyHwb(0, 100.1, 0, 0)).not.toThrow(); + expect(() => legacyHwb(0, 0, 100.1, 0)).not.toThrow(); }); - it('disallows invalid values', () => { + it('disallows invalid alpha values', () => { expect(() => legacyHwb(0, 0, 0, -0.1)).toThrow(); expect(() => legacyHwb(0, 0, 0, 1.1)).toThrow(); }); @@ -205,6 +206,7 @@ describe('Legacy SassColor', () => { }); expect(stdio.err).toMatch('null-alpha'); }); + it("doesn't warn for undefined alpha and no space", () => { const stdio = captureStdio(() => { new SassColor({ @@ -216,12 +218,14 @@ describe('Legacy SassColor', () => { }); expect(stdio.err).toBeEmptyString(); }); + it("doesn't warn for no alpha and no space", () => { const stdio = captureStdio(() => { new SassColor({hue: 1, whiteness: 1, blackness: 1}); }); expect(stdio.err).toBeEmptyString(); }); + it("doesn't warn for undefined alpha and undefined space", () => { const stdio = captureStdio(() => { new SassColor({ @@ -234,6 +238,7 @@ describe('Legacy SassColor', () => { }); expect(stdio.err).toBeEmptyString(); }); + it("doesn't warn for null alpha with space", () => { const stdio = captureStdio(() => { new SassColor({ @@ -335,16 +340,10 @@ describe('Legacy SassColor', () => { expect(color.alpha).toBe(1); }); - // TODO: Failing in dart-sass because legacy colors are equal even if in a - // different (legacy) color space - skipForImpl('dart-sass', () => { - it('equals the same color even in a different color space', () => { - expect(color).toEqualWithHash(legacyRGB(62, 152, 62)); - expect(color).toEqualWithHash(legacyHsl(120, 42, 42)); - expect(color).toEqualWithHash( - legacyHwb(120, 24.313725490196077, 40.3921568627451) - ); - }); + it('equals the same color even in a different color space', () => { + expect(color).toEqualWithHash(legacyRGB(62.118, 152.082, 62.118)); + expect(color).toEqualWithHash(legacyHsl(120, 42, 42)); + expect(color).toEqualWithHash(legacyHwb(120, 24.36, 40.36)); }); it('allows negative hue', () => { @@ -390,14 +389,10 @@ describe('Legacy SassColor', () => { expect(color.alpha).toBe(1); }); - // TODO: Failing in dart-sass because legacy colors are equal even if in a - // different (legacy) color space - skipForImpl('dart-sass', () => { - it('equals the same color even in a different color space', () => { - expect(color).toEqualWithHash(legacyRGB(107, 148, 107)); - expect(color).toEqualWithHash(legacyHsl(120, 16.078431372549026, 50)); - expect(color).toEqualWithHash(legacyHwb(120, 42, 42)); - }); + it('equals the same color even in a different color space', () => { + expect(color).toEqualWithHash(legacyRGB(107.1, 147.9, 107.1)); + expect(color).toEqualWithHash(legacyHsl(120, 16, 50)); + expect(color).toEqualWithHash(legacyHwb(120, 42, 42)); }); it('allows negative hue', () => { @@ -412,6 +407,7 @@ describe('Legacy SassColor', () => { beforeEach(() => { color = legacyRGB(18, 52, 86); }); + it('changes RGB values', () => { expect(color.change({red: 0})).toEqualWithHash(legacyRGB(0, 52, 86)); expect(color.change({green: 0})).toEqualWithHash(legacyRGB(18, 0, 86)); @@ -444,6 +440,7 @@ describe('Legacy SassColor', () => { expect(() => color.change({blue: -1})).not.toThrow(); expect(() => color.change({blue: 256})).not.toThrow(); }); + it('disallows invalid alpha values', () => { expect(() => color.change({alpha: -0.1})).toThrow(); expect(() => color.change({alpha: 1.1})).toThrow(); @@ -457,6 +454,7 @@ describe('Legacy SassColor', () => { color.change({red: -0.1, green: 50.5, blue: 90.9}).channels ).toFuzzyEqualList([-0.1, 50.5, 90.9]); }); + it('emits deprecation for null values', () => { const stdio = captureStdio(() => { color.change({red: null}); @@ -469,6 +467,7 @@ describe('Legacy SassColor', () => { expect(stdio.err.match(/`green: null`/g)).toBeArrayOfSize(1); expect(stdio.err.match(/`blue: null`/g)).toBeArrayOfSize(1); }); + it('emits deprecation for channels from unspecified space', () => { const stdio = captureStdio(() => { color.change({hue: 1}); @@ -482,6 +481,7 @@ describe('Legacy SassColor', () => { beforeEach(() => { color = legacyHsl(210, 65.3846153846154, 20.392156862745097); }); + it('changes HSL values', () => { expect(color.change({hue: 120})).toEqualWithHash( legacyHsl(120, 65.3846153846154, 20.392156862745097) @@ -520,12 +520,12 @@ describe('Legacy SassColor', () => { expect(color.change({lightness: 100}).channel('lightness')).toBe(100); expect(color.change({alpha: 0}).alpha).toBe(0); expect(color.change({alpha: 1}).alpha).toBe(1); + expect(color.change({lightness: -0.1}).lightness).toBe(-0.1); + expect(color.change({lightness: 100.1}).lightness).toBe(100.1); expect(color.change({hue: undefined}).channel('hue')).toBe(210); }); - it('disallows invalid values', () => { - expect(() => color.change({lightness: -0.1})).toThrow(); - expect(() => color.change({lightness: 100.1})).toThrow(); + it('disallows invalid alpha values', () => { expect(() => color.change({alpha: -0.1})).toThrow(); expect(() => color.change({alpha: 1.1})).toThrow(); }); @@ -542,6 +542,7 @@ describe('Legacy SassColor', () => { expect(stdio.err.match(/`saturation: null`/g)).toBeArrayOfSize(1); expect(stdio.err.match(/`lightness: null`/g)).toBeArrayOfSize(1); }); + it('emits deprecation for channels from unspecified space', () => { const stdio = captureStdio(() => { color.change({red: 1}); @@ -555,6 +556,7 @@ describe('Legacy SassColor', () => { beforeEach(() => { color = legacyHwb(210, 7.0588235294117645, 66.27450980392157); }); + it('changes HWB values', () => { expect(color.change({hue: 120})).toEqualWithHash( legacyHwb(120, 7.0588235294117645, 66.27450980392157) @@ -611,6 +613,7 @@ describe('Legacy SassColor', () => { expect(stdio.err.match(/`whiteness: null`/g)).toBeArrayOfSize(1); expect(stdio.err.match(/`blackness: null`/g)).toBeArrayOfSize(1); }); + it('emits deprecation for channels from unspecified space', () => { const stdio = captureStdio(() => { color.change({red: 1}); @@ -624,6 +627,7 @@ describe('Legacy SassColor', () => { beforeEach(() => { color = legacyRGB(18, 52, 86); }); + it('changes the alpha value', () => { expect(color.change({alpha: 0.5})).toEqualWithHash( legacyRGB(18, 52, 86, 0.5) diff --git a/js-api-spec/value/color/spaces.ts b/js-api-spec/value/color/spaces.ts index 33921eb6a..93d26ed70 100644 --- a/js-api-spec/value/color/spaces.ts +++ b/js-api-spec/value/color/spaces.ts @@ -141,7 +141,7 @@ export const spaces: { ], ], }, - srgbLinear: { + 'srgb-linear': { constructor: constructors.srgbLinear, name: 'srgb-linear', isLegacy: false, @@ -162,7 +162,7 @@ export const spaces: { ], ], }, - displayP3: { + 'display-p3': { constructor: constructors.displayP3, name: 'display-p3', isLegacy: false, @@ -183,7 +183,7 @@ export const spaces: { ], ], }, - a98Rgb: { + 'a98-rgb': { constructor: constructors.a98Rgb, name: 'a98-rgb', isLegacy: false, @@ -204,7 +204,7 @@ export const spaces: { ], ], }, - prophotoRgb: { + 'prophoto-rgb': { constructor: constructors.prophotoRgb, name: 'prophoto-rgb', isLegacy: false, @@ -267,7 +267,7 @@ export const spaces: { ], ], }, - xyzD50: { + 'xyz-d50': { constructor: constructors.xyzD50, name: 'xyz-d50', isLegacy: false, @@ -288,7 +288,7 @@ export const spaces: { ], ], }, - xyzD65: { + 'xyz-d65': { constructor: constructors.xyzD65, name: 'xyz', isLegacy: false, From 864cfc8641f4f0e4b43824445ea6122d6a77c971 Mon Sep 17 00:00:00 2001 From: Natalie Weizenbaum Date: Fri, 29 Mar 2024 13:54:33 -0700 Subject: [PATCH 07/18] Fix more color JS tests --- .../value/color/color-4-conversions.test.ts | 85 +++++++++++-------- .../value/color/color-4-spaces.test.ts | 59 +++++++++++-- 2 files changed, 100 insertions(+), 44 deletions(-) diff --git a/js-api-spec/value/color/color-4-conversions.test.ts b/js-api-spec/value/color/color-4-conversions.test.ts index 2c6ffa6f5..0cbdfa525 100644 --- a/js-api-spec/value/color/color-4-conversions.test.ts +++ b/js-api-spec/value/color/color-4-conversions.test.ts @@ -11,7 +11,6 @@ import type { KnownColorSpace, } from 'sass'; -import {skipForImpl} from '../../utils'; import {spaces} from './spaces'; import {interpolations} from './interpolation-examples'; @@ -43,24 +42,16 @@ describe('Color 4 SassColors Conversions', () => { }); }); - // TODO: Waiting on new ColorJS release to fix `hue` interpolation: - // https://github.com/LeaVerou/color.js/pull/338 - skipForImpl('sass-embedded', () => { - // TODO: Failing in dart-sass because `hue` should be normalized to the - // [0, 360) range - skipForImpl('dart-sass', () => { - describe('interpolate', () => { - it('interpolates examples', () => { - const examples = interpolations[space.name]; - examples.forEach(([input, output]) => { - const res = color.interpolate(blue, { - weight: input.weight, - method: input.method as HueInterpolationMethod, - }); - const outputColor = space.constructor(...output); - expect(res).toLooselyEqualColor(outputColor); - }); + describe('interpolate', () => { + it('interpolates examples', () => { + const examples = interpolations[space.name]; + examples.forEach(([input, output]) => { + const res = color.interpolate(blue, { + weight: input.weight, + method: input.method as HueInterpolationMethod, }); + const outputColor = space.constructor(...output); + expect(res).toLooselyEqualColor(outputColor); }); }); }); @@ -118,6 +109,47 @@ describe('Color 4 SassColors Conversions', () => { ).toLooselyEqualColor(space.constructor(...space.pink, null)); }); + describe('allows out-of-range channel values', () => { + const baseColor = space.constructor( + (space.ranges[0][0] + space.ranges[0][1]) / 2, + (space.ranges[1][0] + space.ranges[1][1]) / 2, + (space.ranges[2][0] + space.ranges[2][1]) / 2 + ); + for (let i = 0; i < 3; i++) { + const channel = space.channels[i]; + if (channel === 'hue') continue; + + it(`for ${channel}`, () => { + const aboveRange = space.ranges[i][1] + 10; + const belowRange = space.ranges[i][0] - 10; + const above = baseColor.change({[channel]: aboveRange}); + const below = baseColor.change({[channel]: belowRange}); + + expect(above.channels.get(i)).toEqual(aboveRange); + + switch (channel) { + case 'saturation': + expect(below.channels.get(i)).toEqual(Math.abs(belowRange)); + expect(below.channels.get(0)).toEqual( + (baseColor.channels.get(0) + 180) % 360 + ); + break; + + case 'chroma': + expect(below.channels.get(i)).toEqual(Math.abs(belowRange)); + expect(below.channels.get(2)).toEqual( + (baseColor.channels.get(2) + 180) % 360 + ); + break; + + default: + expect(below.channels.get(i)).toEqual(belowRange); + break; + } + }); + } + }); + spaceNames.forEach(destinationSpaceId => { it(`changes all channels with space set to ${destinationSpaceId}`, () => { const destinationSpace = spaces[destinationSpaceId]; @@ -153,23 +185,6 @@ describe('Color 4 SassColors Conversions', () => { expect(() => color.change({alpha: -1})).toThrow(); expect(() => color.change({alpha: 1.1})).toThrow(); }); - if (space.channels.includes('lightness')) { - describe('out of range lightness', () => { - it('throws on negative lightness', () => { - expect(() => color.change({lightness: -1})).toThrow(); - }); - // TODO: Failing for oklab and oklch in dart-sass - skipForImpl('dart-sass', () => { - it('throws on lightness higher than bounds', () => { - const index = space.channels.findIndex( - channel => channel === 'lightness' - ); - const lightness = space.ranges[index][1] + 1; - expect(() => color.change({lightness})).toThrow(); - }); - }); - }); - } }); describe('isInGamut', () => { diff --git a/js-api-spec/value/color/color-4-spaces.test.ts b/js-api-spec/value/color/color-4-spaces.test.ts index 195942983..5faad02b6 100644 --- a/js-api-spec/value/color/color-4-spaces.test.ts +++ b/js-api-spec/value/color/color-4-spaces.test.ts @@ -41,15 +41,56 @@ describe('Color 4 SassColors Spaces', () => { expect(() => color.assertString()).toThrow(); }); - describe('validation on construction', () => { - it('throws on invalid alpha', () => { - expect(() => { - space.constructor(...space.pink, -1); - }).toThrow(); - expect(() => { - space.constructor(...space.pink, 1.1); - }).toThrow(); - }); + describe('allows out-of-range channel values', () => { + const average1 = (space.ranges[0][0] + space.ranges[0][1]) / 2; + const average2 = (space.ranges[1][0] + space.ranges[1][1]) / 2; + const average3 = (space.ranges[2][0] + space.ranges[2][1]) / 2; + for (let i = 0; i < 3; i++) { + const channel = space.channels[i]; + if (channel === 'hue') continue; + + it(`for ${channel}`, () => { + const aboveRange = space.ranges[i][1] + 10; + const belowRange = space.ranges[i][0] - 10; + const above = space.constructor( + i === 0 ? aboveRange : average1, + i === 1 ? aboveRange : average2, + i === 2 ? aboveRange : average3 + ); + const below = space.constructor( + i === 0 ? belowRange : average1, + i === 1 ? belowRange : average2, + i === 2 ? belowRange : average3 + ); + + expect(above.channels.get(i)).toEqual(aboveRange); + + switch (channel) { + case 'saturation': + expect(below.channels.get(i)).toEqual(Math.abs(belowRange)); + expect(below.channels.get(0)).toEqual((average1 + 180) % 360); + break; + + case 'chroma': + expect(below.channels.get(i)).toEqual(Math.abs(belowRange)); + expect(below.channels.get(2)).toEqual((average3 + 180) % 360); + break; + + default: + expect(below.channels.get(i)).toEqual(belowRange); + break; + } + }); + } + }); + + it('throws on invalid alpha', () => { + expect(() => { + space.constructor(...space.pink, -1); + }).toThrow(); + expect(() => { + space.constructor(...space.pink, 1.1); + }).toThrow(); }); it(`returns name for ${space.name}`, () => { From 57da5b47145401a3937f41110247c154ad50d915 Mon Sep 17 00:00:00 2001 From: Natalie Weizenbaum Date: Fri, 29 Mar 2024 14:11:18 -0700 Subject: [PATCH 08/18] Poke CI From d66d637f9eb782a72c9cba0f658416c143554b4e Mon Sep 17 00:00:00 2001 From: Natalie Weizenbaum Date: Fri, 29 Mar 2024 14:14:37 -0700 Subject: [PATCH 09/18] [Color 4] Update existing specs This covers changes from sass/sass#3819 and sass/sass#3823. --- .../value/color/color-4-channels.test.ts | 292 ++++++++++-------- .../value/color/color-4-conversions.test.ts | 85 ++--- .../value/color/color-4-spaces.test.ts | 81 +++-- js-api-spec/value/color/legacy.test.ts | 96 +++--- js-api-spec/value/color/spaces.ts | 12 +- spec/core_functions/color/_utils.scss | 71 +++++ .../core_functions/color/adjust_color/hsl.hrx | 4 +- .../core_functions/color/adjust_color/hwb.hrx | 8 +- .../color/color/_rgb-utils.scss | 27 -- .../color/color/_xyz-utils.scss | 27 -- spec/core_functions/color/color/alpha.hrx | 58 ++-- spec/core_functions/color/color/no_alpha.hrx | 29 +- .../color/color/spaces/a98_rgb.hrx | 70 +++-- .../color/color/spaces/display_p3.hrx | 70 +++-- .../color/color/spaces/prophoto_rgb.hrx | 70 +++-- .../color/color/spaces/rec2020.hrx | 70 +++-- .../color/color/spaces/srgb.hrx | 70 +++-- .../color/color/spaces/srgb_linear.hrx | 70 +++-- .../core_functions/color/color/spaces/xyz.hrx | 75 +++-- .../color/color/spaces/xyz_d50.hrx | 70 +++-- .../color/color/special_functions.hrx | 48 +-- spec/core_functions/color/grayscale.hrx | 2 +- .../color/hsl/one_arg/no_alpha.hrx | 6 +- .../color/hsl/three_args/clamped.hrx | 10 - .../color/hsl/three_args/out_of_gamut.hrx | 12 + spec/core_functions/color/is_in_gamut.hrx | 2 +- spec/core_functions/color/lab/_utils.scss | 27 -- spec/core_functions/color/lab/alpha.hrx | 36 ++- spec/core_functions/color/lab/no_alpha.hrx | 48 ++- .../color/lab/special_functions/alpha.hrx | 72 ++--- .../color/lab/special_functions/no_alpha.hrx | 42 +-- .../lab/special_functions/slash_list.hrx | 6 +- spec/core_functions/color/lch/_utils.scss | 27 -- spec/core_functions/color/lch/alpha.hrx | 30 +- spec/core_functions/color/lch/no_alpha.hrx | 56 ++-- .../color/lch/special_functions.hrx | 24 +- spec/core_functions/color/mix/error.hrx | 4 +- .../color/mix/hue_interpolation.hrx | 2 +- .../core_functions/color/mix/mixed_spaces.hrx | 2 +- spec/core_functions/color/mix/predefined.hrx | 4 +- spec/core_functions/color/oklab/_utils.scss | 27 -- spec/core_functions/color/oklab/alpha.hrx | 34 +- spec/core_functions/color/oklab/no_alpha.hrx | 50 ++- .../color/oklab/special_functions.hrx | 24 +- spec/core_functions/color/oklch/_utils.scss | 27 -- spec/core_functions/color/oklch/alpha.hrx | 30 +- spec/core_functions/color/oklch/no_alpha.hrx | 56 ++-- .../color/oklch/special_functions.hrx | 24 +- spec/libsass/color-functions/rgb/rgb/b.hrx | 8 +- spec/libsass/color-functions/rgb/rgb/g.hrx | 8 +- spec/libsass/color-functions/rgb/rgb/r.hrx | 8 +- spec/libsass/color-functions/rgb/rgba/b.hrx | 8 +- spec/libsass/color-functions/rgb/rgba/g.hrx | 8 +- spec/libsass/color-functions/rgb/rgba/r.hrx | 8 +- spec/non_conformant/colors/basic.hrx | 2 +- 55 files changed, 1169 insertions(+), 968 deletions(-) create mode 100644 spec/core_functions/color/_utils.scss delete mode 100644 spec/core_functions/color/color/_rgb-utils.scss delete mode 100644 spec/core_functions/color/color/_xyz-utils.scss create mode 100644 spec/core_functions/color/hsl/three_args/out_of_gamut.hrx delete mode 100644 spec/core_functions/color/lab/_utils.scss delete mode 100644 spec/core_functions/color/lch/_utils.scss delete mode 100644 spec/core_functions/color/oklab/_utils.scss delete mode 100644 spec/core_functions/color/oklch/_utils.scss diff --git a/js-api-spec/value/color/color-4-channels.test.ts b/js-api-spec/value/color/color-4-channels.test.ts index ac0e3dc85..9bcdee6b9 100644 --- a/js-api-spec/value/color/color-4-channels.test.ts +++ b/js-api-spec/value/color/color-4-channels.test.ts @@ -10,7 +10,6 @@ import {List} from 'immutable'; import {spaces} from './spaces'; import {channelCases, channelNames} from './utils'; -import {skipForImpl} from '../../utils'; const spaceNames = Object.keys(spaces) as KnownColorSpace[]; @@ -161,148 +160,171 @@ describe('Color 4 SassColor Channels', () => { }); }); - // TODO(sass#3654) Failing in dart-sass pending: - // https://github.com/sass/sass/issues/3654 - skipForImpl('dart-sass', () => { + if (!['hsl', 'hwb', 'lch', 'oklch'].includes(spaceId)) { describe('isChannelPowerless', () => { - function checkPowerless( - _color: SassColor, - powerless = [false, false, false] - ) { - it(`channels ${_color.channels.toArray()} is ${powerless}`, () => { - expect(_color.isChannelPowerless(space.channels[0])).toBe( - powerless[0] - ); - expect(_color.isChannelPowerless(space.channels[1])).toBe( - powerless[1] - ); - expect(_color.isChannelPowerless(space.channels[2])).toBe( - powerless[2] - ); - }); - } - const [ch1, ch2, ch3] = space.ranges; - if (space.hasPowerless) { - // test powerless channels - switch (space.name) { - case 'hwb': - // If the combined `whiteness` and `blackness` values (after - // normalization) are equal to `100%`, then the `hue` channel is - // powerless. - checkPowerless(space.constructor(ch1[0], 0, 100), [ - true, - false, - false, - ]); - checkPowerless(space.constructor(ch1[0], 100, 0), [ - true, - false, - false, - ]); - checkPowerless(space.constructor(ch1[0], 50, 50), [ - true, - false, - false, - ]); - checkPowerless(space.constructor(ch1[1], 0, 100), [ - true, - false, - false, - ]); - checkPowerless(space.constructor(ch1[1], 100, 0), [ - true, - false, - false, - ]); - checkPowerless(space.constructor(ch1[1], 50, 50), [ - true, - false, - false, - ]); + const [range1, range2, range3] = space.ranges; + checkPowerless(space.constructor(range1[0], range2[0], range3[0])); + checkPowerless(space.constructor(range1[1], range2[0], range3[0])); + checkPowerless(space.constructor(range1[1], range2[1], range3[0])); + checkPowerless(space.constructor(range1[1], range2[1], range3[1])); + checkPowerless(space.constructor(range1[0], range2[1], range3[1])); + checkPowerless(space.constructor(range1[0], range2[0], range3[1])); + checkPowerless(space.constructor(range1[1], range2[0], range3[1])); + checkPowerless(space.constructor(range1[0], range2[1], range3[0])); + }); + } + }); + }); - checkPowerless(space.constructor(ch1[0], ch2[1], ch3[1])); - checkPowerless(space.constructor(ch1[0], ch2[0], ch3[0])); - checkPowerless(space.constructor(ch1[1], ch2[1], ch3[1])); - checkPowerless(space.constructor(ch1[1], ch2[0], ch3[0])); + describe('isChannelPowerless', () => { + describe('for HWB', () => { + // If the combined `whiteness + blackness` is great than or equal to + // `100%`, then the `hue` channel is powerless. + checkPowerless( + new SassColor({hue: 0, whiteness: 0, blackness: 100, space: 'hwb'}), + [true, false, false] + ); + checkPowerless( + new SassColor({hue: 0, whiteness: 100, blackness: 0, space: 'hwb'}), + [true, false, false] + ); + checkPowerless( + new SassColor({hue: 0, whiteness: 50, blackness: 50, space: 'hwb'}), + [true, false, false] + ); + checkPowerless( + new SassColor({hue: 0, whiteness: 60, blackness: 60, space: 'hwb'}), + [true, false, false] + ); + checkPowerless( + new SassColor({hue: 0, whiteness: -100, blackness: 200, space: 'hwb'}), + [true, false, false] + ); + checkPowerless( + new SassColor({hue: 0, whiteness: 200, blackness: -100, space: 'hwb'}), + [true, false, false] + ); + checkPowerless( + new SassColor({hue: 100, whiteness: 0, blackness: 100, space: 'hwb'}), + [true, false, false] + ); - break; + checkPowerless( + new SassColor({hue: 0, whiteness: 0, blackness: 0, space: 'hwb'}) + ); + checkPowerless( + new SassColor({hue: 0, whiteness: 49, blackness: 50, space: 'hwb'}) + ); + checkPowerless( + new SassColor({hue: 0, whiteness: -1, blackness: 100, space: 'hwb'}) + ); + checkPowerless( + new SassColor({hue: 100, whiteness: 0, blackness: 0, space: 'hwb'}) + ); + }); - case 'hsl': - // hsl- If the saturation of an HSL color is 0%, then the hue component is powerless. - checkPowerless(space.constructor(ch1[0], 0, ch3[0]), [ - true, - false, - false, - ]); - checkPowerless(space.constructor(ch1[0], 0, ch3[1]), [ - true, - false, - false, - ]); - checkPowerless(space.constructor(ch1[1], 0, ch3[1]), [ - true, - false, - false, - ]); - checkPowerless(space.constructor(ch1[1], 0, ch3[0]), [ - true, - false, - false, - ]); + describe('for HSL', () => { + // If the saturation of an HSL color is 0%, then the hue component is + // powerless. + checkPowerless( + new SassColor({hue: 0, saturation: 0, lightness: 0, space: 'hsl'}), + [true, false, false] + ); + checkPowerless( + new SassColor({hue: 0, saturation: 0, lightness: 100, space: 'hsl'}), + [true, false, false] + ); + checkPowerless( + new SassColor({hue: 100, saturation: 0, lightness: 0, space: 'hsl'}), + [true, false, false] + ); - checkPowerless(space.constructor(ch1[0], ch2[1], ch3[0])); - checkPowerless(space.constructor(ch1[0], ch2[1], ch3[1])); - checkPowerless(space.constructor(ch1[1], ch2[1], ch3[1])); - checkPowerless(space.constructor(ch1[1], ch2[1], ch3[0])); - break; + checkPowerless( + new SassColor({hue: 0, saturation: 100, lightness: 0, space: 'hsl'}) + ); + checkPowerless( + new SassColor({hue: 0, saturation: 100, lightness: 100, space: 'hsl'}) + ); + checkPowerless( + new SassColor({hue: 100, saturation: 100, lightness: 100, space: 'hsl'}) + ); + checkPowerless( + new SassColor({hue: 100, saturation: 100, lightness: 0, space: 'hsl'}) + ); + }); - case 'lch': - case 'oklch': - // (ok)lch- If the `chroma` value is 0%, then the `hue` channel is powerless. - checkPowerless(space.constructor(ch1[0], 0, ch3[0]), [ - false, - false, - true, - ]); - checkPowerless(space.constructor(ch1[0], 0, ch3[1]), [ - false, - false, - true, - ]); - checkPowerless(space.constructor(ch1[1], 0, ch3[1]), [ - false, - false, - true, - ]); - checkPowerless(space.constructor(ch1[1], 0, ch3[0]), [ - false, - false, - true, - ]); + describe('for LCH', () => { + // If the `chroma` value is 0%, then the `hue` channel is powerless. + checkPowerless( + new SassColor({lightness: 0, chroma: 0, hue: 0, space: 'lch'}), + [false, false, true] + ); + checkPowerless( + new SassColor({lightness: 0, chroma: 0, hue: 100, space: 'lch'}), + [false, false, true] + ); + checkPowerless( + new SassColor({lightness: 100, chroma: 0, hue: 0, space: 'lch'}), + [false, false, true] + ); - checkPowerless(space.constructor(ch1[0], ch2[1], ch3[0])); - checkPowerless(space.constructor(ch1[0], ch2[1], ch3[1])); - checkPowerless(space.constructor(ch1[1], ch2[1], ch3[1])); - checkPowerless(space.constructor(ch1[1], ch2[1], ch3[0])); - break; + checkPowerless( + new SassColor({lightness: 0, chroma: 100, hue: 0, space: 'lch'}) + ); + checkPowerless( + new SassColor({lightness: 0, chroma: 100, hue: 100, space: 'lch'}) + ); + checkPowerless( + new SassColor({lightness: 100, chroma: 100, hue: 100, space: 'lch'}) + ); + checkPowerless( + new SassColor({lightness: 100, chroma: 100, hue: 0, space: 'lch'}) + ); + }); - default: - throw new Error( - `Unimplemented isPowerless check for ${space.name}` - ); - } - } else { - checkPowerless(space.constructor(ch1[0], ch2[0], ch3[0])); - checkPowerless(space.constructor(ch1[1], ch2[0], ch3[0])); - checkPowerless(space.constructor(ch1[1], ch2[1], ch3[0])); - checkPowerless(space.constructor(ch1[1], ch2[1], ch3[1])); - checkPowerless(space.constructor(ch1[0], ch2[1], ch3[1])); - checkPowerless(space.constructor(ch1[0], ch2[0], ch3[1])); - checkPowerless(space.constructor(ch1[1], ch2[0], ch3[1])); - checkPowerless(space.constructor(ch1[0], ch2[1], ch3[0])); - } - }); - }); + describe('for OKLCH', () => { + // If the `chroma` value is 0%, then the `hue` channel is powerless. + checkPowerless( + new SassColor({lightness: 0, chroma: 0, hue: 0, space: 'oklch'}), + [false, false, true] + ); + checkPowerless( + new SassColor({lightness: 0, chroma: 0, hue: 100, space: 'oklch'}), + [false, false, true] + ); + checkPowerless( + new SassColor({lightness: 100, chroma: 0, hue: 0, space: 'oklch'}), + [false, false, true] + ); + + checkPowerless( + new SassColor({lightness: 0, chroma: 100, hue: 0, space: 'oklch'}) + ); + checkPowerless( + new SassColor({lightness: 0, chroma: 100, hue: 100, space: 'oklch'}) + ); + checkPowerless( + new SassColor({lightness: 100, chroma: 100, hue: 100, space: 'oklch'}) + ); + checkPowerless( + new SassColor({lightness: 100, chroma: 100, hue: 0, space: 'oklch'}) + ); }); }); }); + +/** + * Creates a test that checks that the powerless channels in `color` match the + * expectation in `powerless`. + */ +function checkPowerless( + color: SassColor, + powerless = [false, false, false] +): void { + it(`${color}: ${powerless}`, () => { + const space = spaces[color.space]!; + expect(color.isChannelPowerless(space.channels[0])).toBe(powerless[0]); + expect(color.isChannelPowerless(space.channels[1])).toBe(powerless[1]); + expect(color.isChannelPowerless(space.channels[2])).toBe(powerless[2]); + }); +} diff --git a/js-api-spec/value/color/color-4-conversions.test.ts b/js-api-spec/value/color/color-4-conversions.test.ts index 2c6ffa6f5..0cbdfa525 100644 --- a/js-api-spec/value/color/color-4-conversions.test.ts +++ b/js-api-spec/value/color/color-4-conversions.test.ts @@ -11,7 +11,6 @@ import type { KnownColorSpace, } from 'sass'; -import {skipForImpl} from '../../utils'; import {spaces} from './spaces'; import {interpolations} from './interpolation-examples'; @@ -43,24 +42,16 @@ describe('Color 4 SassColors Conversions', () => { }); }); - // TODO: Waiting on new ColorJS release to fix `hue` interpolation: - // https://github.com/LeaVerou/color.js/pull/338 - skipForImpl('sass-embedded', () => { - // TODO: Failing in dart-sass because `hue` should be normalized to the - // [0, 360) range - skipForImpl('dart-sass', () => { - describe('interpolate', () => { - it('interpolates examples', () => { - const examples = interpolations[space.name]; - examples.forEach(([input, output]) => { - const res = color.interpolate(blue, { - weight: input.weight, - method: input.method as HueInterpolationMethod, - }); - const outputColor = space.constructor(...output); - expect(res).toLooselyEqualColor(outputColor); - }); + describe('interpolate', () => { + it('interpolates examples', () => { + const examples = interpolations[space.name]; + examples.forEach(([input, output]) => { + const res = color.interpolate(blue, { + weight: input.weight, + method: input.method as HueInterpolationMethod, }); + const outputColor = space.constructor(...output); + expect(res).toLooselyEqualColor(outputColor); }); }); }); @@ -118,6 +109,47 @@ describe('Color 4 SassColors Conversions', () => { ).toLooselyEqualColor(space.constructor(...space.pink, null)); }); + describe('allows out-of-range channel values', () => { + const baseColor = space.constructor( + (space.ranges[0][0] + space.ranges[0][1]) / 2, + (space.ranges[1][0] + space.ranges[1][1]) / 2, + (space.ranges[2][0] + space.ranges[2][1]) / 2 + ); + for (let i = 0; i < 3; i++) { + const channel = space.channels[i]; + if (channel === 'hue') continue; + + it(`for ${channel}`, () => { + const aboveRange = space.ranges[i][1] + 10; + const belowRange = space.ranges[i][0] - 10; + const above = baseColor.change({[channel]: aboveRange}); + const below = baseColor.change({[channel]: belowRange}); + + expect(above.channels.get(i)).toEqual(aboveRange); + + switch (channel) { + case 'saturation': + expect(below.channels.get(i)).toEqual(Math.abs(belowRange)); + expect(below.channels.get(0)).toEqual( + (baseColor.channels.get(0) + 180) % 360 + ); + break; + + case 'chroma': + expect(below.channels.get(i)).toEqual(Math.abs(belowRange)); + expect(below.channels.get(2)).toEqual( + (baseColor.channels.get(2) + 180) % 360 + ); + break; + + default: + expect(below.channels.get(i)).toEqual(belowRange); + break; + } + }); + } + }); + spaceNames.forEach(destinationSpaceId => { it(`changes all channels with space set to ${destinationSpaceId}`, () => { const destinationSpace = spaces[destinationSpaceId]; @@ -153,23 +185,6 @@ describe('Color 4 SassColors Conversions', () => { expect(() => color.change({alpha: -1})).toThrow(); expect(() => color.change({alpha: 1.1})).toThrow(); }); - if (space.channels.includes('lightness')) { - describe('out of range lightness', () => { - it('throws on negative lightness', () => { - expect(() => color.change({lightness: -1})).toThrow(); - }); - // TODO: Failing for oklab and oklch in dart-sass - skipForImpl('dart-sass', () => { - it('throws on lightness higher than bounds', () => { - const index = space.channels.findIndex( - channel => channel === 'lightness' - ); - const lightness = space.ranges[index][1] + 1; - expect(() => color.change({lightness})).toThrow(); - }); - }); - }); - } }); describe('isInGamut', () => { diff --git a/js-api-spec/value/color/color-4-spaces.test.ts b/js-api-spec/value/color/color-4-spaces.test.ts index b83e9c2f7..5faad02b6 100644 --- a/js-api-spec/value/color/color-4-spaces.test.ts +++ b/js-api-spec/value/color/color-4-spaces.test.ts @@ -8,7 +8,6 @@ import {Value, SassColor} from 'sass'; import type {KnownColorSpace} from 'sass'; import {spaces} from './spaces'; -import {skipForImpl} from '../../utils'; const spaceNames = Object.keys(spaces) as KnownColorSpace[]; @@ -42,42 +41,58 @@ describe('Color 4 SassColors Spaces', () => { expect(() => color.assertString()).toThrow(); }); - describe('validation on construction', () => { - it('throws on invalid alpha', () => { - expect(() => { - space.constructor(...space.pink, -1); - }).toThrow(); - expect(() => { - space.constructor(...space.pink, 1.1); - }).toThrow(); - }); - - if (space.channels.includes('lightness')) { - describe('out of range lightness', () => { - it('throws on negative lightness', () => { - const index = space.channels.findIndex( - channel => channel === 'lightness' - ); - const channels = [...space.pink] as [number, number, number]; - channels[index] = -1; - expect(() => space.constructor(...channels)).toThrow(); - }); - - // TODO: Failing for oklab and oklch in dart-sass - skipForImpl('dart-sass', () => { - it('throws on lightness higher than bounds', () => { - const index = space.channels.findIndex( - channel => channel === 'lightness' - ); - const channels = [...space.pink] as [number, number, number]; - channels[index] = space.ranges[index][1] + 1; - expect(() => space.constructor(...channels)).toThrow(); - }); - }); + describe('allows out-of-range channel values', () => { + const average1 = (space.ranges[0][0] + space.ranges[0][1]) / 2; + const average2 = (space.ranges[1][0] + space.ranges[1][1]) / 2; + const average3 = (space.ranges[2][0] + space.ranges[2][1]) / 2; + for (let i = 0; i < 3; i++) { + const channel = space.channels[i]; + if (channel === 'hue') continue; + + it(`for ${channel}`, () => { + const aboveRange = space.ranges[i][1] + 10; + const belowRange = space.ranges[i][0] - 10; + const above = space.constructor( + i === 0 ? aboveRange : average1, + i === 1 ? aboveRange : average2, + i === 2 ? aboveRange : average3 + ); + const below = space.constructor( + i === 0 ? belowRange : average1, + i === 1 ? belowRange : average2, + i === 2 ? belowRange : average3 + ); + + expect(above.channels.get(i)).toEqual(aboveRange); + + switch (channel) { + case 'saturation': + expect(below.channels.get(i)).toEqual(Math.abs(belowRange)); + expect(below.channels.get(0)).toEqual((average1 + 180) % 360); + break; + + case 'chroma': + expect(below.channels.get(i)).toEqual(Math.abs(belowRange)); + expect(below.channels.get(2)).toEqual((average3 + 180) % 360); + break; + + default: + expect(below.channels.get(i)).toEqual(belowRange); + break; + } }); } }); + it('throws on invalid alpha', () => { + expect(() => { + space.constructor(...space.pink, -1); + }).toThrow(); + expect(() => { + space.constructor(...space.pink, 1.1); + }).toThrow(); + }); + it(`returns name for ${space.name}`, () => { expect(color.space).toBe(space.name); }); diff --git a/js-api-spec/value/color/legacy.test.ts b/js-api-spec/value/color/legacy.test.ts index b07e420fc..a64484973 100644 --- a/js-api-spec/value/color/legacy.test.ts +++ b/js-api-spec/value/color/legacy.test.ts @@ -3,7 +3,7 @@ // https://opensource.org/licenses/MIT. import {Value, SassColor} from 'sass'; -import {captureStdio, skipForImpl} from '../../utils'; +import {captureStdio} from '../../utils'; import {legacyRGB, legacyHsl, legacyHwb} from './constructors'; describe('Legacy SassColor', () => { @@ -46,7 +46,7 @@ describe('Legacy SassColor', () => { expect(() => legacyRGB(0, 0, 0, 1.1)).toThrow(); }); - it('allows out of range values which were invalid before color 4', () => { + it('allows out-of-gamut values which were invalid before color 4', () => { expect(() => legacyRGB(-1, 0, 0, 0)).not.toThrow(); expect(() => legacyRGB(0, -1, 0, 0)).not.toThrow(); expect(() => legacyRGB(0, 0, -1, 0)).not.toThrow(); @@ -71,18 +71,21 @@ describe('Legacy SassColor', () => { }); expect(stdio.err).toMatch('null-alpha'); }); + it("doesn't warn for undefined alpha and no space", () => { const stdio = captureStdio(() => { new SassColor({red: 1, green: 1, blue: 1, alpha: undefined}); }); expect(stdio.err).toBeEmptyString(); }); + it("doesn't warn for no alpha and no space", () => { const stdio = captureStdio(() => { new SassColor({red: 1, green: 1, blue: 1}); }); expect(stdio.err).toBeEmptyString(); }); + it("doesn't warn for undefined alpha and undefined space", () => { const stdio = captureStdio(() => { new SassColor({ @@ -95,6 +98,7 @@ describe('Legacy SassColor', () => { }); expect(stdio.err).toBeEmptyString(); }); + it("doesn't warn for null alpha with space", () => { const stdio = captureStdio(() => { new SassColor({ @@ -111,20 +115,17 @@ describe('Legacy SassColor', () => { }); describe('hsl()', () => { - // TODO: Failing in dart-sass because saturation should not be clamped - skipForImpl('dart-sass', () => { - it('allows valid values', () => { - expect(() => legacyHsl(0, 0, 0, 0)).not.toThrow(); - expect(() => legacyHsl(4320, 100, 100, 1)).not.toThrow(); - expect(() => legacyHsl(0, -0.1, 0, 0)).not.toThrow(); - expect(() => legacyHsl(0, 100.1, 0, 0)).not.toThrow(); - }); + it('allows valid values', () => { + expect(() => legacyHsl(0, 0, 0, 0)).not.toThrow(); + expect(() => legacyHsl(4320, 100, 100, 1)).not.toThrow(); + expect(() => legacyHsl(0, -0.1, 0, 0)).not.toThrow(); + expect(() => legacyHsl(0, 100.1, 0, 0)).not.toThrow(); + expect(() => legacyHsl(0, 0, -0.1, 0)).not.toThrow(); + expect(() => legacyHsl(0, 0, 100.1, 0)).not.toThrow(); }); - it('disallows invalid values', () => { - expect(() => legacyHsl(0, 0, -0.1, 0)).toThrow(); + it('disallows invalid alpha values', () => { expect(() => legacyHsl(0, 0, 0, -0.1)).toThrow(); - expect(() => legacyHsl(0, 0, 100.1, 0)).toThrow(); expect(() => legacyHsl(0, 0, 0, 1.1)).toThrow(); }); @@ -135,6 +136,7 @@ describe('Legacy SassColor', () => { }); expect(stdio.err).toMatch('null-alpha'); }); + it("doesn't warn for undefined alpha and no space", () => { const stdio = captureStdio(() => { new SassColor({ @@ -146,12 +148,14 @@ describe('Legacy SassColor', () => { }); expect(stdio.err).toBeEmptyString(); }); + it("doesn't warn for no alpha and no space", () => { const stdio = captureStdio(() => { new SassColor({hue: 1, saturation: 1, lightness: 1}); }); expect(stdio.err).toBeEmptyString(); }); + it("doesn't warn for undefined alpha and undefined space", () => { const stdio = captureStdio(() => { new SassColor({ @@ -164,6 +168,7 @@ describe('Legacy SassColor', () => { }); expect(stdio.err).toBeEmptyString(); }); + it("doesn't warn for null alpha with space", () => { const stdio = captureStdio(() => { new SassColor({ @@ -180,20 +185,16 @@ describe('Legacy SassColor', () => { }); describe('hwb()', () => { - // TODO: Failing in dart-sass because whiteness and blackness should not - // be clamped - skipForImpl('dart-sass', () => { - it('allows valid values', () => { - expect(() => legacyHwb(0, 0, 0, 0)).not.toThrow(); - expect(() => legacyHwb(4320, 100, 100, 1)).not.toThrow(); - expect(() => legacyHwb(0, -0.1, 0, 0)).not.toThrow(); - expect(() => legacyHwb(0, 0, -0.1, 0)).not.toThrow(); - expect(() => legacyHwb(0, 100.1, 0, 0)).not.toThrow(); - expect(() => legacyHwb(0, 0, 100.1, 0)).not.toThrow(); - }); + it('allows valid values', () => { + expect(() => legacyHwb(0, 0, 0, 0)).not.toThrow(); + expect(() => legacyHwb(4320, 100, 100, 1)).not.toThrow(); + expect(() => legacyHwb(0, -0.1, 0, 0)).not.toThrow(); + expect(() => legacyHwb(0, 0, -0.1, 0)).not.toThrow(); + expect(() => legacyHwb(0, 100.1, 0, 0)).not.toThrow(); + expect(() => legacyHwb(0, 0, 100.1, 0)).not.toThrow(); }); - it('disallows invalid values', () => { + it('disallows invalid alpha values', () => { expect(() => legacyHwb(0, 0, 0, -0.1)).toThrow(); expect(() => legacyHwb(0, 0, 0, 1.1)).toThrow(); }); @@ -205,6 +206,7 @@ describe('Legacy SassColor', () => { }); expect(stdio.err).toMatch('null-alpha'); }); + it("doesn't warn for undefined alpha and no space", () => { const stdio = captureStdio(() => { new SassColor({ @@ -216,12 +218,14 @@ describe('Legacy SassColor', () => { }); expect(stdio.err).toBeEmptyString(); }); + it("doesn't warn for no alpha and no space", () => { const stdio = captureStdio(() => { new SassColor({hue: 1, whiteness: 1, blackness: 1}); }); expect(stdio.err).toBeEmptyString(); }); + it("doesn't warn for undefined alpha and undefined space", () => { const stdio = captureStdio(() => { new SassColor({ @@ -234,6 +238,7 @@ describe('Legacy SassColor', () => { }); expect(stdio.err).toBeEmptyString(); }); + it("doesn't warn for null alpha with space", () => { const stdio = captureStdio(() => { new SassColor({ @@ -335,16 +340,10 @@ describe('Legacy SassColor', () => { expect(color.alpha).toBe(1); }); - // TODO: Failing in dart-sass because legacy colors are equal even if in a - // different (legacy) color space - skipForImpl('dart-sass', () => { - it('equals the same color even in a different color space', () => { - expect(color).toEqualWithHash(legacyRGB(62, 152, 62)); - expect(color).toEqualWithHash(legacyHsl(120, 42, 42)); - expect(color).toEqualWithHash( - legacyHwb(120, 24.313725490196077, 40.3921568627451) - ); - }); + it('equals the same color even in a different color space', () => { + expect(color).toEqualWithHash(legacyRGB(62.118, 152.082, 62.118)); + expect(color).toEqualWithHash(legacyHsl(120, 42, 42)); + expect(color).toEqualWithHash(legacyHwb(120, 24.36, 40.36)); }); it('allows negative hue', () => { @@ -390,14 +389,10 @@ describe('Legacy SassColor', () => { expect(color.alpha).toBe(1); }); - // TODO: Failing in dart-sass because legacy colors are equal even if in a - // different (legacy) color space - skipForImpl('dart-sass', () => { - it('equals the same color even in a different color space', () => { - expect(color).toEqualWithHash(legacyRGB(107, 148, 107)); - expect(color).toEqualWithHash(legacyHsl(120, 16.078431372549026, 50)); - expect(color).toEqualWithHash(legacyHwb(120, 42, 42)); - }); + it('equals the same color even in a different color space', () => { + expect(color).toEqualWithHash(legacyRGB(107.1, 147.9, 107.1)); + expect(color).toEqualWithHash(legacyHsl(120, 16, 50)); + expect(color).toEqualWithHash(legacyHwb(120, 42, 42)); }); it('allows negative hue', () => { @@ -412,6 +407,7 @@ describe('Legacy SassColor', () => { beforeEach(() => { color = legacyRGB(18, 52, 86); }); + it('changes RGB values', () => { expect(color.change({red: 0})).toEqualWithHash(legacyRGB(0, 52, 86)); expect(color.change({green: 0})).toEqualWithHash(legacyRGB(18, 0, 86)); @@ -444,6 +440,7 @@ describe('Legacy SassColor', () => { expect(() => color.change({blue: -1})).not.toThrow(); expect(() => color.change({blue: 256})).not.toThrow(); }); + it('disallows invalid alpha values', () => { expect(() => color.change({alpha: -0.1})).toThrow(); expect(() => color.change({alpha: 1.1})).toThrow(); @@ -457,6 +454,7 @@ describe('Legacy SassColor', () => { color.change({red: -0.1, green: 50.5, blue: 90.9}).channels ).toFuzzyEqualList([-0.1, 50.5, 90.9]); }); + it('emits deprecation for null values', () => { const stdio = captureStdio(() => { color.change({red: null}); @@ -469,6 +467,7 @@ describe('Legacy SassColor', () => { expect(stdio.err.match(/`green: null`/g)).toBeArrayOfSize(1); expect(stdio.err.match(/`blue: null`/g)).toBeArrayOfSize(1); }); + it('emits deprecation for channels from unspecified space', () => { const stdio = captureStdio(() => { color.change({hue: 1}); @@ -482,6 +481,7 @@ describe('Legacy SassColor', () => { beforeEach(() => { color = legacyHsl(210, 65.3846153846154, 20.392156862745097); }); + it('changes HSL values', () => { expect(color.change({hue: 120})).toEqualWithHash( legacyHsl(120, 65.3846153846154, 20.392156862745097) @@ -520,12 +520,12 @@ describe('Legacy SassColor', () => { expect(color.change({lightness: 100}).channel('lightness')).toBe(100); expect(color.change({alpha: 0}).alpha).toBe(0); expect(color.change({alpha: 1}).alpha).toBe(1); + expect(color.change({lightness: -0.1}).lightness).toBe(-0.1); + expect(color.change({lightness: 100.1}).lightness).toBe(100.1); expect(color.change({hue: undefined}).channel('hue')).toBe(210); }); - it('disallows invalid values', () => { - expect(() => color.change({lightness: -0.1})).toThrow(); - expect(() => color.change({lightness: 100.1})).toThrow(); + it('disallows invalid alpha values', () => { expect(() => color.change({alpha: -0.1})).toThrow(); expect(() => color.change({alpha: 1.1})).toThrow(); }); @@ -542,6 +542,7 @@ describe('Legacy SassColor', () => { expect(stdio.err.match(/`saturation: null`/g)).toBeArrayOfSize(1); expect(stdio.err.match(/`lightness: null`/g)).toBeArrayOfSize(1); }); + it('emits deprecation for channels from unspecified space', () => { const stdio = captureStdio(() => { color.change({red: 1}); @@ -555,6 +556,7 @@ describe('Legacy SassColor', () => { beforeEach(() => { color = legacyHwb(210, 7.0588235294117645, 66.27450980392157); }); + it('changes HWB values', () => { expect(color.change({hue: 120})).toEqualWithHash( legacyHwb(120, 7.0588235294117645, 66.27450980392157) @@ -611,6 +613,7 @@ describe('Legacy SassColor', () => { expect(stdio.err.match(/`whiteness: null`/g)).toBeArrayOfSize(1); expect(stdio.err.match(/`blackness: null`/g)).toBeArrayOfSize(1); }); + it('emits deprecation for channels from unspecified space', () => { const stdio = captureStdio(() => { color.change({red: 1}); @@ -624,6 +627,7 @@ describe('Legacy SassColor', () => { beforeEach(() => { color = legacyRGB(18, 52, 86); }); + it('changes the alpha value', () => { expect(color.change({alpha: 0.5})).toEqualWithHash( legacyRGB(18, 52, 86, 0.5) diff --git a/js-api-spec/value/color/spaces.ts b/js-api-spec/value/color/spaces.ts index 33921eb6a..93d26ed70 100644 --- a/js-api-spec/value/color/spaces.ts +++ b/js-api-spec/value/color/spaces.ts @@ -141,7 +141,7 @@ export const spaces: { ], ], }, - srgbLinear: { + 'srgb-linear': { constructor: constructors.srgbLinear, name: 'srgb-linear', isLegacy: false, @@ -162,7 +162,7 @@ export const spaces: { ], ], }, - displayP3: { + 'display-p3': { constructor: constructors.displayP3, name: 'display-p3', isLegacy: false, @@ -183,7 +183,7 @@ export const spaces: { ], ], }, - a98Rgb: { + 'a98-rgb': { constructor: constructors.a98Rgb, name: 'a98-rgb', isLegacy: false, @@ -204,7 +204,7 @@ export const spaces: { ], ], }, - prophotoRgb: { + 'prophoto-rgb': { constructor: constructors.prophotoRgb, name: 'prophoto-rgb', isLegacy: false, @@ -267,7 +267,7 @@ export const spaces: { ], ], }, - xyzD50: { + 'xyz-d50': { constructor: constructors.xyzD50, name: 'xyz-d50', isLegacy: false, @@ -288,7 +288,7 @@ export const spaces: { ], ], }, - xyzD65: { + 'xyz-d65': { constructor: constructors.xyzD65, name: 'xyz', isLegacy: false, diff --git a/spec/core_functions/color/_utils.scss b/spec/core_functions/color/_utils.scss new file mode 100644 index 000000000..375c314cf --- /dev/null +++ b/spec/core_functions/color/_utils.scss @@ -0,0 +1,71 @@ +@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 { + $space: color.space($color); + space: $space; + + @if $space == 'rgb' or $space == 'srgb' or $space == 'srgb-linear' or + $space == 'display-p3' or $space == 'a98-rgb' or + $space == 'prophoto-rgb' or $space == 'rec2020' { + channels: list.slash( + -real-channel($color, 'red') + -real-channel($color, 'green') + -real-channel($color, 'blue'), + -real-channel($color, 'alpha') + ); + } @else if $space == 'hwb' { + channels: list.slash( + -real-channel($color, 'hue') + -real-channel($color, 'whiteness') + -real-channel($color, 'blackness'), + -real-channel($color, 'alpha') + ); + } @else if $space == 'hsl' { + channels: list.slash( + -real-channel($color, 'hue') + -real-channel($color, 'saturation') + -real-channel($color, 'lightness'), + -real-channel($color, 'alpha') + ); + } @else if $space == 'xyz' or $space == 'xyz-d50' { + channels: list.slash( + -real-channel($color, 'x') + -real-channel($color, 'y') + -real-channel($color, 'z'), + -real-channel($color, 'alpha') + ); + } @else if $space == 'lab' or $space == 'oklab' { + channels: list.slash( + -real-channel($color, 'lightness') + -real-channel($color, 'a') + -real-channel($color, 'b'), + -real-channel($color, 'alpha') + ); + } @else if $space == 'lch' or $space == 'oklch' { + channels: list.slash( + -real-channel($color, 'lightness') + -real-channel($color, 'chroma') + -real-channel($color, 'hue'), + -real-channel($color, 'alpha') + ); + } @else { + @error "Unknown color space #{$space}"; + } + } + } +} diff --git a/spec/core_functions/color/adjust_color/hsl.hrx b/spec/core_functions/color/adjust_color/hsl.hrx index 4bf9e26b1..5a9fb9bf5 100644 --- a/spec/core_functions/color/adjust_color/hsl.hrx +++ b/spec/core_functions/color/adjust_color/hsl.hrx @@ -63,7 +63,7 @@ a {b: adjust-color(plum, $saturation: 100%)} <===> saturation/max/output.css a { - b: #ff7eff; + b: hsl(300, 147.2868217054%, 74.7058823529%); } <===> @@ -73,7 +73,7 @@ a {b: adjust-color(plum, $saturation: 53%)} <===> saturation/max_remaining/output.css a { - b: #ff7eff; + b: hsl(300, 100.2868217054%, 74.7058823529%); } <===> diff --git a/spec/core_functions/color/adjust_color/hwb.hrx b/spec/core_functions/color/adjust_color/hwb.hrx index 625259ca9..4414f6741 100644 --- a/spec/core_functions/color/adjust_color/hwb.hrx +++ b/spec/core_functions/color/adjust_color/hwb.hrx @@ -3,7 +3,7 @@ a {b: adjust-color(#cc6666, $whiteness: 100%)} <===> whiteness/max/output.css a { - b: rgb(212.5, 212.5, 212.5); + b: rgb(223.125, 223.125, 223.125); } <===> @@ -33,7 +33,7 @@ a {b: adjust-color(#cc6666, $whiteness: -100%)} <===> whiteness/min/output.css a { - b: #cc0000; + b: hsl(0, 700%, 10%); } <===> @@ -73,7 +73,7 @@ a {b: adjust-color(#993333, $blackness: 100%)} <===> blackness/max/output.css a { - b: rgb(42.5, 42.5, 42.5); + b: rgb(31.875, 31.875, 31.875); } <===> @@ -103,7 +103,7 @@ a {b: adjust-color(#993333, $blackness: -100%)} <===> blackness/min/output.css a { - b: #ff3333; + b: hsl(0, 700%, 90%); } <===> diff --git a/spec/core_functions/color/color/_rgb-utils.scss b/spec/core_functions/color/color/_rgb-utils.scss deleted file mode 100644 index 266f54772..000000000 --- a/spec/core_functions/color/color/_rgb-utils.scss +++ /dev/null @@ -1,27 +0,0 @@ -@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 deleted file mode 100644 index 8290223bd..000000000 --- a/spec/core_functions/color/color/_xyz-utils.scss +++ /dev/null @@ -1,27 +0,0 @@ -@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 index 3e672f825..b66231103 100644 --- a/spec/core_functions/color/color/alpha.hrx +++ b/spec/core_functions/color/color/alpha.hrx @@ -1,58 +1,63 @@ <===> transparent/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(srgb 0.1 0.2 0.3 / 0)); +@use 'core_functions/color/utils'; +@include 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); + space: srgb; 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb 0.1 0.2 0.3 / 1)); <===> opaque/output.css a { value: color(srgb 0.1 0.2 0.3); + space: srgb; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: srgb; 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%)); +@use 'core_functions/color/utils'; +@include 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); + space: srgb; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: srgb; channels: 0.1 0.2 0.3 / 0.4; } @@ -60,36 +65,39 @@ a { ================================================================================ <===> 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))); +@use 'core_functions/color/utils'; +@include 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); + space: srgb; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: srgb; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: srgb; channels: 0.1 0.2 0.3 / none; } @@ -97,12 +105,13 @@ a { ================================================================================ <===> 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))); +@use 'core_functions/color/utils'; +@include 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); + space: srgb; channels: 0.1 0.2 none / 0.4; } @@ -110,20 +119,21 @@ a { ================================================================================ <===> 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))); +@use 'core_functions/color/utils'; +@include 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); + space: srgb; 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%)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(from #aaa srgb r g b / 25%)); <===> relative_color/slash/output.css a { @@ -135,8 +145,8 @@ a { ================================================================================ <===> 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%))); +@use 'core_functions/color/utils'; +@include utils.inspect(color(list.slash(from #aaa srgb r g b, 25%))); <===> relative_color/slash_list/output.css a { diff --git a/spec/core_functions/color/color/no_alpha.hrx b/spec/core_functions/color/color/no_alpha.hrx index 218077126..f5318ef2d 100644 --- a/spec/core_functions/color/color/no_alpha.hrx +++ b/spec/core_functions/color/color/no_alpha.hrx @@ -1,54 +1,58 @@ <===> none/red/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(srgb none 0.2 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb none 0.2 0.3)); <===> none/red/output.css a { value: color(srgb none 0.2 0.3); + space: srgb; 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb 0.1 none 0.3)); <===> none/green/output.css a { value: color(srgb 0.1 none 0.3); + space: srgb; 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb 0.1 none 0.3)); <===> none/blue/output.css a { value: color(srgb 0.1 none 0.3); + space: srgb; 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(sRGB 0.1 none 0.3)); <===> case/output.css a { value: color(srgb 0.1 none 0.3); + space: srgb; 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(from #aaa srgb r g b)); <===> relative_color/output.css a { @@ -59,11 +63,12 @@ a { <===> ================================================================================ <===> named/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color($description: srgb 0.1 0.2 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color($description: srgb 0.1 0.2 0.3)); <===> named/output.css a { value: color(srgb 0.1 0.2 0.3); + space: srgb; channels: 0.1 0.2 0.3 / 1; } diff --git a/spec/core_functions/color/color/spaces/a98_rgb.hrx b/spec/core_functions/color/color/spaces/a98_rgb.hrx index 2c073216f..877efcd52 100644 --- a/spec/core_functions/color/color/spaces/a98_rgb.hrx +++ b/spec/core_functions/color/color/spaces/a98_rgb.hrx @@ -1,165 +1,179 @@ <===> 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)); +@use 'core_functions/color/utils'; +@include 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); + space: a98-rgb; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: a98-rgb; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: a98-rgb; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: a98-rgb; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: a98-rgb; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: a98-rgb; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: a98-rgb; 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%)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(a98-rgb 10% 20% 30%)); <===> percent/in_range/output.css a { value: color(a98-rgb 0.1 0.2 0.3); + space: a98-rgb; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: a98-rgb; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: a98-rgb; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: a98-rgb; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: a98-rgb; 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%)); +@use 'core_functions/color/utils'; +@include 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); + space: a98-rgb; 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%)); +@use 'core_functions/color/utils'; +@include 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); + space: a98-rgb; 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 index a7ae00505..91c495833 100644 --- a/spec/core_functions/color/color/spaces/display_p3.hrx +++ b/spec/core_functions/color/color/spaces/display_p3.hrx @@ -1,165 +1,179 @@ <===> 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)); +@use 'core_functions/color/utils'; +@include 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); + space: display-p3; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: display-p3; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: display-p3; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: display-p3; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: display-p3; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: display-p3; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: display-p3; 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%)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(display-p3 10% 20% 30%)); <===> percent/in_range/output.css a { value: color(display-p3 0.1 0.2 0.3); + space: display-p3; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: display-p3; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: display-p3; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: display-p3; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: display-p3; 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%)); +@use 'core_functions/color/utils'; +@include 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); + space: display-p3; 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%)); +@use 'core_functions/color/utils'; +@include 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); + space: display-p3; 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 index 080f28eb0..67750f549 100644 --- a/spec/core_functions/color/color/spaces/prophoto_rgb.hrx +++ b/spec/core_functions/color/color/spaces/prophoto_rgb.hrx @@ -1,165 +1,179 @@ <===> 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)); +@use 'core_functions/color/utils'; +@include 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); + space: prophoto-rgb; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: prophoto-rgb; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: prophoto-rgb; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: prophoto-rgb; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: prophoto-rgb; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: prophoto-rgb; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: prophoto-rgb; 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%)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(prophoto-rgb 10% 20% 30%)); <===> percent/in_range/output.css a { value: color(prophoto-rgb 0.1 0.2 0.3); + space: prophoto-rgb; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: prophoto-rgb; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: prophoto-rgb; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: prophoto-rgb; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: prophoto-rgb; 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%)); +@use 'core_functions/color/utils'; +@include 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); + space: prophoto-rgb; 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%)); +@use 'core_functions/color/utils'; +@include 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); + space: prophoto-rgb; 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 index c5df2d5f1..097ea4665 100644 --- a/spec/core_functions/color/color/spaces/rec2020.hrx +++ b/spec/core_functions/color/color/spaces/rec2020.hrx @@ -1,165 +1,179 @@ <===> unitless/in_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(rec2020 0.1 0.2 0.3)); +@use 'core_functions/color/utils'; +@include 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); + space: rec2020; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: rec2020; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: rec2020; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: rec2020; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: rec2020; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: rec2020; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: rec2020; 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%)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(rec2020 10% 20% 30%)); <===> percent/in_range/output.css a { value: color(rec2020 0.1 0.2 0.3); + space: rec2020; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: rec2020; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: rec2020; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: rec2020; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: rec2020; 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%)); +@use 'core_functions/color/utils'; +@include 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); + space: rec2020; 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%)); +@use 'core_functions/color/utils'; +@include 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); + space: rec2020; 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 index 6f3ac5d2e..05e445a7f 100644 --- a/spec/core_functions/color/color/spaces/srgb.hrx +++ b/spec/core_functions/color/color/spaces/srgb.hrx @@ -1,165 +1,179 @@ <===> unitless/in_range/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(srgb 0.1 0.2 0.3)); +@use 'core_functions/color/utils'; +@include 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); + space: srgb; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: srgb; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: srgb; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: srgb; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: srgb; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: srgb; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: srgb; 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%)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb 10% 20% 30%)); <===> percent/in_range/output.css a { value: color(srgb 0.1 0.2 0.3); + space: srgb; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: srgb; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: srgb; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: srgb; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: srgb; 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%)); +@use 'core_functions/color/utils'; +@include 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); + space: srgb; 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%)); +@use 'core_functions/color/utils'; +@include 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); + space: srgb; 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 index 9bb3cea1c..395abf17b 100644 --- a/spec/core_functions/color/color/spaces/srgb_linear.hrx +++ b/spec/core_functions/color/color/spaces/srgb_linear.hrx @@ -1,165 +1,179 @@ <===> 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)); +@use 'core_functions/color/utils'; +@include 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); + space: srgb-linear; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: srgb-linear; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: srgb-linear; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: srgb-linear; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: srgb-linear; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: srgb-linear; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: srgb-linear; 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%)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb-linear 10% 20% 30%)); <===> percent/in_range/output.css a { value: color(srgb-linear 0.1 0.2 0.3); + space: srgb-linear; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: srgb-linear; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: srgb-linear; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: srgb-linear; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: srgb-linear; 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%)); +@use 'core_functions/color/utils'; +@include 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); + space: srgb-linear; 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%)); +@use 'core_functions/color/utils'; +@include 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); + space: srgb-linear; 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 index 8970c4532..9dfe04af2 100644 --- a/spec/core_functions/color/color/spaces/xyz.hrx +++ b/spec/core_functions/color/color/spaces/xyz.hrx @@ -1,177 +1,192 @@ <===> unitless/in_range/input.scss -@use 'core_functions/color/color/xyz-utils'; -@include xyz-utils.inspect(color(xyz 0.1 0.2 0.3)); +@use 'core_functions/color/utils'; +@include 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); + space: xyz; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: xyz; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: xyz; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: xyz; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: xyz; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: xyz; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: xyz; 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%)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(xyz 10% 20% 30%)); <===> percent/in_range/output.css a { value: color(xyz 0.1 0.2 0.3); + space: xyz; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: xyz; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: xyz; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: xyz; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: xyz; 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%)); +@use 'core_functions/color/utils'; +@include 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); + space: xyz; 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%)); +@use 'core_functions/color/utils'; +@include 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); + space: xyz; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: xyz; 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 index f836ab16f..3357106e0 100644 --- a/spec/core_functions/color/color/spaces/xyz_d50.hrx +++ b/spec/core_functions/color/color/spaces/xyz_d50.hrx @@ -1,165 +1,179 @@ <===> 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)); +@use 'core_functions/color/utils'; +@include 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); + space: xyz-d50; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: xyz-d50; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: xyz-d50; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: xyz-d50; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: xyz-d50; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: xyz-d50; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: xyz-d50; 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%)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(xyz-d50 10% 20% 30%)); <===> percent/in_range/output.css a { value: color(xyz-d50 0.1 0.2 0.3); + space: xyz-d50; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: xyz-d50; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: xyz-d50; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: xyz-d50; 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)); +@use 'core_functions/color/utils'; +@include 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); + space: xyz-d50; 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%)); +@use 'core_functions/color/utils'; +@include 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); + space: xyz-d50; 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%)); +@use 'core_functions/color/utils'; +@include 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); + space: xyz-d50; 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 index c93bb051e..064c758ba 100644 --- a/spec/core_functions/color/color/special_functions.hrx +++ b/spec/core_functions/color/color/special_functions.hrx @@ -1,6 +1,6 @@ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb calc(1px + 1%) 0.2 0.3)); <===> calculation/arg_1/output.css a { @@ -11,8 +11,8 @@ a { <===> ================================================================================ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb 0.1 calc(1px + 1%) 0.3)); <===> calculation/arg_2/output.css a { @@ -23,8 +23,8 @@ a { <===> ================================================================================ <===> 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%))); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb 0.1 0.2 calc(1px + 1%))); <===> calculation/arg_3/output.css a { @@ -35,8 +35,8 @@ a { <===> ================================================================================ <===> 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%))); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb 0.1 0.2 0.3 / calc(1px + 1%))); <===> calculation/arg_4/output.css a { @@ -47,8 +47,8 @@ a { <===> ================================================================================ <===> var/arg_1/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(srgb var(--foo) 0.2 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb var(--foo) 0.2 0.3)); <===> var/arg_1/output.css a { @@ -59,8 +59,8 @@ a { <===> ================================================================================ <===> var/arg_2/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(srgb 0.1 var(--foo) 0.3)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb 0.1 var(--foo) 0.3)); <===> var/arg_2/output.css a { @@ -71,8 +71,8 @@ a { <===> ================================================================================ <===> var/arg_3/input.scss -@use 'core_functions/color/color/rgb-utils'; -@include rgb-utils.inspect(color(srgb 0.1 0.2 var(--foo))); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb 0.1 0.2 var(--foo))); <===> var/arg_3/output.css a { @@ -83,8 +83,8 @@ a { <===> ================================================================================ <===> 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))); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb 0.1 0.2 0.3 / var(--foo))); <===> var/arg_4/output.css a { @@ -96,8 +96,8 @@ a { ================================================================================ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb var(--foo) 0.3)); <===> multi_argument_var/1_of_2/output.css a { @@ -108,8 +108,8 @@ a { <===> ================================================================================ <===> 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))); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb 0.1 var(--foo))); <===> multi_argument_var/2_of_2/output.css a { @@ -120,8 +120,8 @@ a { <===> ================================================================================ <===> 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))); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb var(--foo))); <===> multi_argument_var/1_of_1/no_alpha/output.css a { @@ -132,8 +132,8 @@ a { <===> ================================================================================ <===> 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)); +@use 'core_functions/color/utils'; +@include utils.inspect(color(srgb var(--foo) / 0.4)); <===> multi_argument_var/1_of_1/alpha/output.css a { diff --git a/spec/core_functions/color/grayscale.hrx b/spec/core_functions/color/grayscale.hrx index ac29702ae..604112db9 100644 --- a/spec/core_functions/color/grayscale.hrx +++ b/spec/core_functions/color/grayscale.hrx @@ -94,7 +94,7 @@ a {b: grayscale(lch(54.3 107 40.9))} <===> non_legacy/polar/output.css a { - b: lch(56.854581217% 0.0000089094 270.4698997617deg); + b: lch(56.854581217% 0.0000089094 270.4699001175deg); } <===> 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 e175a51c1..88c65610e 100644 --- a/spec/core_functions/color/hsl/one_arg/no_alpha.hrx +++ b/spec/core_functions/color/hsl/one_arg/no_alpha.hrx @@ -28,12 +28,12 @@ a { <===> ================================================================================ -<===> clamped/saturation/above/input.scss +<===> out_of_gamut/saturation/above/input.scss a {b: hsl(0 500% 50%)} -<===> clamped/saturation/above/output.css +<===> out_of_gamut/saturation/above/output.css a { - b: hsl(0, 100%, 50%); + b: hsl(0, 500%, 50%); } <===> diff --git a/spec/core_functions/color/hsl/three_args/clamped.hrx b/spec/core_functions/color/hsl/three_args/clamped.hrx index 722b8f6e8..bad8c2a18 100644 --- a/spec/core_functions/color/hsl/three_args/clamped.hrx +++ b/spec/core_functions/color/hsl/three_args/clamped.hrx @@ -1,16 +1,6 @@ <===> README.md The W3C tests cover clamped hue, but not clamped saturation or lightness. -<===> -================================================================================ -<===> saturation/above/input.scss -a {b: hsl(0, 500%, 50%)} - -<===> saturation/above/output.css -a { - b: hsl(0, 100%, 50%); -} - <===> ================================================================================ <===> saturation/below/input.scss diff --git a/spec/core_functions/color/hsl/three_args/out_of_gamut.hrx b/spec/core_functions/color/hsl/three_args/out_of_gamut.hrx new file mode 100644 index 000000000..bed3d2b75 --- /dev/null +++ b/spec/core_functions/color/hsl/three_args/out_of_gamut.hrx @@ -0,0 +1,12 @@ +<===> saturation/above/input.scss +a {b: hsl(0, 500%, 50%)} + +<===> saturation/above/output.css +a { + b: hsl(0, 500%, 50%); +} + +<===> saturation/above/output-libsass.css +a { + b: red; +} diff --git a/spec/core_functions/color/is_in_gamut.hrx b/spec/core_functions/color/is_in_gamut.hrx index af99008df..7e86e86f0 100644 --- a/spec/core_functions/color/is_in_gamut.hrx +++ b/spec/core_functions/color/is_in_gamut.hrx @@ -235,7 +235,7 @@ a {b: color.is-in-gamut(color(display-p3 1 1 0), hwb)} <===> wide_narrow/output.css a { - b: true; + b: false; } <===> diff --git a/spec/core_functions/color/lab/_utils.scss b/spec/core_functions/color/lab/_utils.scss deleted file mode 100644 index 106fe41df..000000000 --- a/spec/core_functions/color/lab/_utils.scss +++ /dev/null @@ -1,27 +0,0 @@ -@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, 'a') - -real-channel($color, 'b'), - -real-channel($color, 'alpha') - ); - } - } -} diff --git a/spec/core_functions/color/lab/alpha.hrx b/spec/core_functions/color/lab/alpha.hrx index bdb10dcb9..cff840012 100644 --- a/spec/core_functions/color/lab/alpha.hrx +++ b/spec/core_functions/color/lab/alpha.hrx @@ -1,58 +1,63 @@ <===> transparent/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(0 255 127 / 0)); <===> transparent/output.css a { value: lab(0% 255 127 / 0); + space: lab; channels: 0% 255 127 / 0; } <===> ================================================================================ <===> opaque/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 3 / 1)); <===> opaque/output.css a { value: lab(1% 2 3); + space: lab; channels: 1% 2 3 / 1; } <===> ================================================================================ <===> partial/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 3 / 0.4)); <===> partial/output.css a { value: lab(1% 2 3 / 0.4); + space: lab; channels: 1% 2 3 / 0.4; } <===> ================================================================================ <===> percent/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 3 / 40%)); <===> percent/output.css a { value: lab(1% 2 3 / 0.4); + space: lab; channels: 1% 2 3 / 0.4; } <===> ================================================================================ <===> named/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab($channels: 1% 2 3 / 0.4)); <===> named/output.css a { value: lab(1% 2 3 / 0.4); + space: lab; channels: 1% 2 3 / 0.4; } @@ -60,48 +65,52 @@ a { ================================================================================ <===> slash_list/input.scss @use "sass:list"; -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(list.slash(1% 2 3, 0.4))); <===> slash_list/output.css a { value: lab(1% 2 3 / 0.4); + space: lab; channels: 1% 2 3 / 0.4; } <===> ================================================================================ <===> none/slash/b/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 none / 0.4)); <===> none/slash/b/output.css a { value: lab(1% 2 none / 0.4); + space: lab; channels: 1% 2 none / 0.4; } <===> ================================================================================ <===> none/slash/alpha/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 3 / none)); <===> none/slash/alpha/output.css a { value: lab(1% 2 3 / none); + space: lab; channels: 1% 2 3 / none; } <===> ================================================================================ <===> none/slash/b_and_alpha/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 none / none)); <===> none/slash/b_and_alpha/output.css a { value: lab(1% 2 none / none); + space: lab; channels: 1% 2 none / none; } @@ -109,12 +118,13 @@ a { ================================================================================ <===> none/slash_list/b/input.scss @use 'sass:list'; -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(list.slash(1% 2 none, 0.4))); <===> none/slash_list/b/output.css a { value: lab(1% 2 none / 0.4); + space: lab; channels: 1% 2 none / 0.4; } @@ -122,12 +132,13 @@ a { ================================================================================ <===> none/slash_list/alpha/input.scss @use 'sass:list'; -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(list.slash(1% 2 3, none))); <===> none/slash_list/alpha/output.css a { value: lab(1% 2 3 / none); + space: lab; channels: 1% 2 3 / none; } @@ -135,11 +146,12 @@ a { ================================================================================ <===> none/slash_list/b_and_alpha/input.scss @use 'sass:list'; -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(list.slash(1% 2 none, none))); <===> none/slash_list/b_and_alpha/output.css a { value: lab(1% 2 none / none); + space: lab; channels: 1% 2 none / none; } diff --git a/spec/core_functions/color/lab/no_alpha.hrx b/spec/core_functions/color/lab/no_alpha.hrx index 69e193f4e..39d71357f 100644 --- a/spec/core_functions/color/lab/no_alpha.hrx +++ b/spec/core_functions/color/lab/no_alpha.hrx @@ -1,189 +1,205 @@ <===> unitless/ab/in_range/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 -3)); <===> unitless/ab/in_range/output.css a { value: lab(1% 2 -3); + space: lab; channels: 1% 2 -3 / 1; } <===> ================================================================================ <===> unitless/ab/above_range/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 126 300)); <===> unitless/ab/above_range/output.css a { value: lab(1% 126 300); + space: lab; channels: 1% 126 300 / 1; } <===> ================================================================================ <===> unitless/ab/below_range/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% -126 -300)); <===> unitless/ab/below_range/output.css a { value: lab(1% -126 -300); + space: lab; channels: 1% -126 -300 / 1; } <===> ================================================================================ <===> unitless/lightness/in_range/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(10 2 -3)); <===> unitless/lightness/in_range/output.css a { value: lab(10% 2 -3); + space: lab; channels: 10% 2 -3 / 1; } <===> ================================================================================ <===> unitless/lightness/above_range/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(101 2 3)); <===> unitless/lightness/above_range/output.css a { value: lab(100% 2 3); + space: lab; channels: 100% 2 3 / 1; } <===> ================================================================================ <===> unitless/lightness/below_range/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(-1 2 3)); <===> unitless/lightness/below_range/output.css a { value: lab(0% 2 3); + space: lab; channels: 0% 2 3 / 1; } <===> ================================================================================ <===> percent/ab/in_range/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2% -3%)); <===> percent/ab/in_range/output.css a { value: lab(1% 2.5 -3.75); + space: lab; channels: 1% 2.5 -3.75 / 1; } <===> ================================================================================ <===> percent/ab/above_range/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 101% 150%)); <===> percent/ab/above_range/output.css a { value: lab(1% 126.25 187.5); + space: lab; channels: 1% 126.25 187.5 / 1; } <===> ================================================================================ <===> percent/ab/below_range/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% -101% -150%)); <===> percent/ab/below_range/output.css a { value: lab(1% -126.25 -187.5); + space: lab; channels: 1% -126.25 -187.5 / 1; } <===> ================================================================================ <===> percent/lightness/in_range/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2% -3%)); <===> percent/lightness/in_range/output.css a { value: lab(1% 2.5 -3.75); + space: lab; channels: 1% 2.5 -3.75 / 1; } <===> ================================================================================ <===> percent/lightness/above_range/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(110% 2 3)); <===> percent/lightness/above_range/output.css a { value: lab(100% 2 3); + space: lab; channels: 100% 2 3 / 1; } <===> ================================================================================ <===> percent/lightness/below_range/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(-1% 2 3)); <===> percent/lightness/below_range/output.css a { value: lab(0% 2 3); + space: lab; channels: 0% 2 3 / 1; } <===> ================================================================================ <===> none/lightness/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(none 2 3)); <===> none/lightness/output.css a { value: lab(none 2 3); + space: lab; channels: none 2 3 / 1; } <===> ================================================================================ <===> none/a/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% none 3)); <===> none/a/output.css a { value: lab(1% none 3); + space: lab; channels: 1% none 3 / 1; } <===> ================================================================================ <===> none/b/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 none)); <===> none/b/output.css a { value: lab(1% 2 none); + space: lab; channels: 1% 2 none / 1; } <===> ================================================================================ <===> named/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab($channels: 1% 2 3)); <===> named/output.css a { value: lab(1% 2 3); + space: lab; channels: 1% 2 3 / 1; } diff --git a/spec/core_functions/color/lab/special_functions/alpha.hrx b/spec/core_functions/color/lab/special_functions/alpha.hrx index 85837f597..081d164f8 100644 --- a/spec/core_functions/color/lab/special_functions/alpha.hrx +++ b/spec/core_functions/color/lab/special_functions/alpha.hrx @@ -1,5 +1,5 @@ <===> calc/string/arg_1/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(unquote("calc(1%)") 2 3 / 0.4)); <===> calc/string/arg_1/output.css @@ -11,7 +11,7 @@ a { <===> ================================================================================ <===> calc/string/arg_2/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% unquote("calc(2)") 3 / 0.4)); <===> calc/string/arg_2/output.css @@ -23,7 +23,7 @@ a { <===> ================================================================================ <===> calc/string/arg_3/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 unquote("calc(3)") / 0.4)); <===> calc/string/arg_3/output.css @@ -35,7 +35,7 @@ a { <===> ================================================================================ <===> calc/string/arg_4/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 3 / unquote("calc(0.4)"))); <===> calc/string/arg_4/output.css @@ -47,7 +47,7 @@ a { <===> ================================================================================ <===> calc/calculation/arg_1/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(calc(1px + 1%) 2 3 / 0.4)); <===> calc/calculation/arg_1/output.css @@ -59,7 +59,7 @@ a { <===> ================================================================================ <===> calc/calculation/arg_2/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% calc(1px + 1%) 3 / 0.4)); <===> calc/calculation/arg_2/output.css @@ -71,7 +71,7 @@ a { <===> ================================================================================ <===> calc/calculation/arg_3/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 calc(1px + 1%) / 0.4)); <===> calc/calculation/arg_3/output.css @@ -83,7 +83,7 @@ a { <===> ================================================================================ <===> calc/calculation/arg_4/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 3 / calc(1px + 1%))); <===> calc/calculation/arg_4/output.css @@ -95,7 +95,7 @@ a { <===> ================================================================================ <===> var/arg_1/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(var(--foo) 2 3 / 0.4)); <===> var/arg_1/output.css @@ -107,7 +107,7 @@ a { <===> ================================================================================ <===> var/arg_2/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% var(--foo) 3 / 0.4)); <===> var/arg_2/output.css @@ -119,7 +119,7 @@ a { <===> ================================================================================ <===> var/arg_3/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 var(--foo) / 0.4)); <===> var/arg_3/output.css @@ -131,7 +131,7 @@ a { <===> ================================================================================ <===> var/arg_4/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 3 / var(--foo))); <===> var/arg_4/output.css @@ -143,7 +143,7 @@ a { <===> ================================================================================ <===> env/arg_1/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(env(--foo) 2 3 / 0.4)); <===> env/arg_1/output.css @@ -155,7 +155,7 @@ a { <===> ================================================================================ <===> env/arg_2/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% env(--foo) 3 / 0.4)); <===> env/arg_2/output.css @@ -167,7 +167,7 @@ a { <===> ================================================================================ <===> env/arg_3/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 env(--foo) / 0.4)); <===> env/arg_3/output.css @@ -179,7 +179,7 @@ a { <===> ================================================================================ <===> env/arg_4/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 3 / env(--foo))); <===> env/arg_4/output.css @@ -191,7 +191,7 @@ a { <===> ================================================================================ <===> min/string/arg_1/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(unquote("min(1%)") 2 3 / 0.4)); <===> min/string/arg_1/output.css @@ -203,7 +203,7 @@ a { <===> ================================================================================ <===> min/string/arg_2/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% unquote("min(2)") 3 / 0.4)); <===> min/string/arg_2/output.css @@ -215,7 +215,7 @@ a { <===> ================================================================================ <===> min/string/arg_3/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 unquote("min(3)") / 0.4)); <===> min/string/arg_3/output.css @@ -227,7 +227,7 @@ a { <===> ================================================================================ <===> min/string/arg_4/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 3 / unquote("min(0.4)"))); <===> min/string/arg_4/output.css @@ -239,7 +239,7 @@ a { <===> ================================================================================ <===> max/string/arg_1/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(unquote("max(1%)") 2 3 / 0.4)); <===> max/string/arg_1/output.css @@ -251,7 +251,7 @@ a { <===> ================================================================================ <===> max/string/arg_2/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% unquote("max(2)") 3 / 0.4)); <===> max/string/arg_2/output.css @@ -263,7 +263,7 @@ a { <===> ================================================================================ <===> max/string/arg_3/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 unquote("max(3)") / 0.4)); <===> max/string/arg_3/output.css @@ -275,7 +275,7 @@ a { <===> ================================================================================ <===> max/string/arg_4/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 3 / unquote("max(0.4)"))); <===> max/string/arg_4/output.css @@ -287,7 +287,7 @@ a { <===> ================================================================================ <===> clamp/string/arg_1/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(unquote("clamp(1%, 2, 3)") 2 3 / 0.4)); <===> clamp/string/arg_1/output.css @@ -299,7 +299,7 @@ a { <===> ================================================================================ <===> clamp/string/arg_2/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% unquote("clamp(2, 3, 4)") 3 / 0.4)); <===> clamp/string/arg_2/output.css @@ -311,7 +311,7 @@ a { <===> ================================================================================ <===> clamp/string/arg_3/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 unquote("clamp(3, 4, 5)") / 0.4)); <===> clamp/string/arg_3/output.css @@ -323,7 +323,7 @@ a { <===> ================================================================================ <===> clamp/string/arg_4/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 3 / unquote("clamp(0.4, 0.5, 0.6)"))); <===> clamp/string/arg_4/output.css @@ -335,7 +335,7 @@ a { <===> ================================================================================ <===> unknown/arg_3/with_number/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 b / 0.4)); <===> unknown/arg_3/with_number/output.css @@ -347,7 +347,7 @@ a { <===> ================================================================================ <===> unknown/arg_3/with_none/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 b / none)); <===> unknown/arg_3/with_none/output.css @@ -359,7 +359,7 @@ a { <===> ================================================================================ <===> unknown/arg_4/with_number/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 3 / b)); <===> unknown/arg_4/with_number/output.css @@ -371,7 +371,7 @@ a { <===> ================================================================================ <===> unknown/arg_4/with_none/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 none / b)); <===> unknown/arg_4/with_none/output.css @@ -383,7 +383,7 @@ a { <===> ================================================================================ <===> unknown/arg_3_and_4/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 b / c)); <===> unknown/arg_3_and_4/output.css @@ -396,7 +396,7 @@ a { ================================================================================ <===> multi_argument_var/1_of_2/input.scss // var() is substituted before parsing, so it may contain multiple arguments. -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(var(--foo) 2 / 0.4)); <===> multi_argument_var/1_of_2/output.css @@ -408,7 +408,7 @@ a { <===> ================================================================================ <===> multi_argument_var/2_of_2/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% var(--foo) / 0.4)); <===> multi_argument_var/2_of_2/output.css @@ -420,7 +420,7 @@ a { <===> ================================================================================ <===> multi_argument_var/1_of_1/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(var(--foo) / 0.4)); <===> multi_argument_var/1_of_1/output.css diff --git a/spec/core_functions/color/lab/special_functions/no_alpha.hrx b/spec/core_functions/color/lab/special_functions/no_alpha.hrx index c20e71040..8f461e641 100644 --- a/spec/core_functions/color/lab/special_functions/no_alpha.hrx +++ b/spec/core_functions/color/lab/special_functions/no_alpha.hrx @@ -1,5 +1,5 @@ <===> calc/string/arg_1/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(unquote("calc(1%)") 2 3)); <===> calc/string/arg_1/output.css @@ -11,7 +11,7 @@ a { <===> ================================================================================ <===> calc/string/arg_2/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% unquote("calc(2)") 3)); <===> calc/string/arg_2/output.css @@ -23,7 +23,7 @@ a { <===> ================================================================================ <===> calc/string/arg_3/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 unquote("calc(3)"))); <===> calc/string/arg_3/output.css @@ -35,7 +35,7 @@ a { <===> ================================================================================ <===> calc/calculation/arg_1/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(calc(1px + 1%) 2 3)); <===> calc/calculation/arg_1/output.css @@ -47,7 +47,7 @@ a { <===> ================================================================================ <===> calc/calculation/arg_2/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% calc(1px + 1%) 3)); <===> calc/calculation/arg_2/output.css @@ -59,7 +59,7 @@ a { <===> ================================================================================ <===> calc/calculation/arg_3/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 calc(1px + 1%))); <===> calc/calculation/arg_3/output.css @@ -71,7 +71,7 @@ a { <===> ================================================================================ <===> var/arg_1/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(var(--foo) 2 3)); <===> var/arg_1/output.css @@ -83,7 +83,7 @@ a { <===> ================================================================================ <===> var/arg_2/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% var(--foo) 3)); <===> var/arg_2/output.css @@ -95,7 +95,7 @@ a { <===> ================================================================================ <===> var/arg_3/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 var(--foo))); <===> var/arg_3/output.css @@ -107,7 +107,7 @@ a { <===> ================================================================================ <===> env/arg_1/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(env(--foo) 2 3)); <===> env/arg_1/output.css @@ -119,7 +119,7 @@ a { <===> ================================================================================ <===> env/arg_2/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% env(--foo) 3)); <===> env/arg_2/output.css @@ -131,7 +131,7 @@ a { <===> ================================================================================ <===> env/arg_3/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 env(--foo))); <===> env/arg_3/output.css @@ -143,7 +143,7 @@ a { <===> ================================================================================ <===> min/string/arg_1/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(unquote("min(1%)") 2 3)); <===> min/string/arg_1/output.css @@ -155,7 +155,7 @@ a { <===> ================================================================================ <===> min/string/arg_2/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% unquote("min(2)") 3)); <===> min/string/arg_2/output.css @@ -167,7 +167,7 @@ a { <===> ================================================================================ <===> min/string/arg_3/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 unquote("min(3)"))); <===> min/string/arg_3/output.css @@ -179,7 +179,7 @@ a { <===> ================================================================================ <===> max/string/arg_1/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(unquote("max(1%)") 2 3)); <===> max/string/arg_1/output.css @@ -191,7 +191,7 @@ a { <===> ================================================================================ <===> max/string/arg_2/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% unquote("max(2)") 3)); <===> max/string/arg_2/output.css @@ -203,7 +203,7 @@ a { <===> ================================================================================ <===> max/string/arg_3/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 unquote("max(3)"))); <===> max/string/arg_3/output.css @@ -215,7 +215,7 @@ a { <===> ================================================================================ <===> clamp/string/arg_1/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(unquote("clamp(1%, 2, 3)") 2 3)); <===> clamp/string/arg_1/output.css @@ -227,7 +227,7 @@ a { <===> ================================================================================ <===> clamp/string/arg_2/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% unquote("clamp(2, 3, 4)") 3)); <===> clamp/string/arg_2/output.css @@ -239,7 +239,7 @@ a { <===> ================================================================================ <===> clamp/string/arg_3/input.scss -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(1% 2 unquote("clamp(3, 4, 5)"))); <===> clamp/string/arg_3/output.css diff --git a/spec/core_functions/color/lab/special_functions/slash_list.hrx b/spec/core_functions/color/lab/special_functions/slash_list.hrx index f99a640c5..b3aace0b9 100644 --- a/spec/core_functions/color/lab/special_functions/slash_list.hrx +++ b/spec/core_functions/color/lab/special_functions/slash_list.hrx @@ -1,6 +1,6 @@ <===> channels/input.scss @use "sass:list"; -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(list.slash(var(--foo), 0.4))); <===> channels/output.css @@ -13,7 +13,7 @@ a { ================================================================================ <===> some_channels/input.scss @use "sass:list"; -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(list.slash(1% var(--foo), 0.4))); <===> some_channels/output.css @@ -26,7 +26,7 @@ a { ================================================================================ <===> alpha/input.scss @use "sass:list"; -@use 'core_functions/color/lab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lab(list.slash(1% 2 3, var(--c)))); <===> alpha/output.css diff --git a/spec/core_functions/color/lch/_utils.scss b/spec/core_functions/color/lch/_utils.scss deleted file mode 100644 index 508c32e30..000000000 --- a/spec/core_functions/color/lch/_utils.scss +++ /dev/null @@ -1,27 +0,0 @@ -@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/lch/alpha.hrx b/spec/core_functions/color/lch/alpha.hrx index 170b7b0b6..a5957e271 100644 --- a/spec/core_functions/color/lch/alpha.hrx +++ b/spec/core_functions/color/lch/alpha.hrx @@ -1,58 +1,63 @@ <===> transparent/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(1% 2 3deg / 0)); <===> transparent/output.css a { value: lch(1% 2 3deg / 0); + space: lch; channels: 1% 2 3deg / 0; } <===> ================================================================================ <===> opaque/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(1% 2 3deg / 1)); <===> opaque/output.css a { value: lch(1% 2 3deg); + space: lch; channels: 1% 2 3deg / 1; } <===> ================================================================================ <===> partial/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(1% 2 3deg / 0.4)); <===> partial/output.css a { value: lch(1% 2 3deg / 0.4); + space: lch; channels: 1% 2 3deg / 0.4; } <===> ================================================================================ <===> percent/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(1% 2 3deg / 40%)); <===> percent/output.css a { value: lch(1% 2 3deg / 0.4); + space: lch; channels: 1% 2 3deg / 0.4; } <===> ================================================================================ <===> named/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch($channels: 1% 2 3deg / 0.4)); <===> named/output.css a { value: lch(1% 2 3deg / 0.4); + space: lch; channels: 1% 2 3deg / 0.4; } @@ -60,36 +65,39 @@ a { ================================================================================ <===> slash_list/input.scss @use "sass:list"; -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(list.slash(1% 2 3deg, 0.4))); <===> slash_list/output.css a { value: lch(1% 2 3deg / 0.4); + space: lch; channels: 1% 2 3deg / 0.4; } <===> ================================================================================ <===> none/slash/hue/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(1% 2 none / 0.4)); <===> none/slash/hue/output.css a { value: lch(1% 2 none / 0.4); + space: lch; channels: 1% 2 none / 0.4; } <===> ================================================================================ <===> none/slash/alpha/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(1% 2 3deg / none)); <===> none/slash/alpha/output.css a { value: lch(1% 2 3deg / none); + space: lch; channels: 1% 2 3deg / none; } @@ -97,12 +105,13 @@ a { ================================================================================ <===> none/slash_list/hue/input.scss @use 'sass:list'; -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(list.slash(1% 2 none, 0.4))); <===> none/slash_list/hue/output.css a { value: lch(1% 2 none / 0.4); + space: lch; channels: 1% 2 none / 0.4; } @@ -110,11 +119,12 @@ a { ================================================================================ <===> none/slash_list/alpha/input.scss @use 'sass:list'; -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(list.slash(1% 2 3deg, none))); <===> none/slash_list/alpha/output.css a { value: lch(1% 2 3deg / none); + space: lch; channels: 1% 2 3deg / none; } diff --git a/spec/core_functions/color/lch/no_alpha.hrx b/spec/core_functions/color/lch/no_alpha.hrx index 65fc7e78b..8d01279b8 100644 --- a/spec/core_functions/color/lch/no_alpha.hrx +++ b/spec/core_functions/color/lch/no_alpha.hrx @@ -1,189 +1,205 @@ <===> unitless/in_range/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(1 2 3deg)); <===> unitless/in_range/output.css a { value: lch(1% 2 3deg); + space: lch; channels: 1% 2 3deg / 1; } <===> ================================================================================ <===> unitless/lightness/above_range/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(101 2 3deg)); <===> unitless/lightness/above_range/output.css a { value: lch(100% 2 3deg); + space: lch; channels: 100% 2 3deg / 1; } <===> ================================================================================ <===> unitless/lightness/below_range/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(-1 2 3deg)); <===> unitless/lightness/below_range/output.css a { value: lch(0% 2 3deg); + space: lch; channels: 0% 2 3deg / 1; } <===> ================================================================================ <===> unitless/chroma/above_range/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(1% 0.5 3deg)); <===> unitless/chroma/above_range/output.css a { value: lch(1% 0.5 3deg); + space: lch; channels: 1% 0.5 3deg / 1; } <===> ================================================================================ <===> unitless/chroma/below_range/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(1% -0.1 3deg)); <===> unitless/chroma/below_range/output.css a { - value: lch(1% -0.1 3deg); - channels: 1% -0.1 3deg / 1; + value: lch(1% 0 3deg); + space: lch; + channels: 1% 0 3deg / 1; } <===> ================================================================================ <===> unitless/hue/above_range/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(1% 2 361deg)); <===> unitless/hue/above_range/output.css a { value: lch(1% 2 1deg); + space: lch; channels: 1% 2 1deg / 1; } <===> ================================================================================ <===> unitless/hue/below_range/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(1% 2 -1deg)); <===> unitless/hue/below_range/output.css a { value: lch(1% 2 359deg); + space: lch; channels: 1% 2 359deg / 1; } <===> ================================================================================ <===> percent/in_range/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(1% 2% 3deg)); <===> percent/in_range/output.css a { value: lch(1% 3 3deg); + space: lch; channels: 1% 3 3deg / 1; } <===> ================================================================================ <===> percent/lightness/above_range/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(110% 2 3deg)); <===> percent/lightness/above_range/output.css a { value: lch(100% 2 3deg); + space: lch; channels: 100% 2 3deg / 1; } <===> ================================================================================ <===> percent/lightness/below_range/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(-1% 2 3deg)); <===> percent/lightness/below_range/output.css a { value: lch(0% 2 3deg); + space: lch; channels: 0% 2 3deg / 1; } <===> ================================================================================ <===> percent/chroma/above_range/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(1% 101% 3deg)); <===> percent/chroma/above_range/output.css a { value: lch(1% 151.5 3deg); + space: lch; channels: 1% 151.5 3deg / 1; } <===> ================================================================================ <===> percent/chroma/below_range/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(1% -1% 3deg)); <===> percent/chroma/below_range/output.css a { - value: lch(1% -1.5 3deg); - channels: 1% -1.5 3deg / 1; + value: lch(1% 0 3deg); + space: lch; + channels: 1% 0 3deg / 1; } <===> ================================================================================ <===> none/lightness/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(none 2 3deg)); <===> none/lightness/output.css a { value: lch(none 2 3deg); + space: lch; channels: none 2 3deg / 1; } <===> ================================================================================ <===> none/chroma/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(1% none 3deg)); <===> none/chroma/output.css a { value: lch(1% none 3deg); + space: lch; channels: 1% none 3deg / 1; } <===> ================================================================================ <===> none/hue/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(1% 2 none)); <===> none/hue/output.css a { value: lch(1% 2 none); + space: lch; channels: 1% 2 none / 1; } <===> ================================================================================ <===> named/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch($channels: 1% 2 3deg)); <===> named/output.css a { value: lch(1% 2 3deg); + space: lch; channels: 1% 2 3deg / 1; } diff --git a/spec/core_functions/color/lch/special_functions.hrx b/spec/core_functions/color/lch/special_functions.hrx index afcf9f813..dc2ff487b 100644 --- a/spec/core_functions/color/lch/special_functions.hrx +++ b/spec/core_functions/color/lch/special_functions.hrx @@ -1,5 +1,5 @@ <===> calculation/arg_1/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(calc(1px + 1%) 2 3deg)); <===> calculation/arg_1/output.css @@ -11,7 +11,7 @@ a { <===> ================================================================================ <===> calculation/arg_2/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(1% calc(1px + 1%) 3deg)); <===> calculation/arg_2/output.css @@ -23,7 +23,7 @@ a { <===> ================================================================================ <===> calculation/arg_3/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(1% 2 calc(1px + 1%))); <===> calculation/arg_3/output.css @@ -35,7 +35,7 @@ a { <===> ================================================================================ <===> calculation/arg_4/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(1% 2 3deg / calc(1px + 1%))); <===> calculation/arg_4/output.css @@ -47,7 +47,7 @@ a { <===> ================================================================================ <===> var/arg_1/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(var(--foo) 2 3deg)); <===> var/arg_1/output.css @@ -59,7 +59,7 @@ a { <===> ================================================================================ <===> var/arg_2/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(1% var(--foo) 3deg)); <===> var/arg_2/output.css @@ -71,7 +71,7 @@ a { <===> ================================================================================ <===> var/arg_3/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(1% 2 var(--foo))); <===> var/arg_3/output.css @@ -83,7 +83,7 @@ a { <===> ================================================================================ <===> var/arg_4/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(1% 2 3deg / var(--foo))); <===> var/arg_4/output.css @@ -96,7 +96,7 @@ a { ================================================================================ <===> 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'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(var(--foo) 2deg)); <===> multi_argument_var/1_of_2/output.css @@ -108,7 +108,7 @@ a { <===> ================================================================================ <===> multi_argument_var/2_of_2/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(1% var(--foo))); <===> multi_argument_var/2_of_2/output.css @@ -120,7 +120,7 @@ a { <===> ================================================================================ <===> multi_argument_var/1_of_1/no_alpha/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(var(--foo))); <===> multi_argument_var/1_of_1/no_alpha/output.css @@ -132,7 +132,7 @@ a { <===> ================================================================================ <===> multi_argument_var/1_of_1/alpha/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(lch(var(--foo) / 0.4)); <===> multi_argument_var/1_of_1/alpha/output.css diff --git a/spec/core_functions/color/mix/error.hrx b/spec/core_functions/color/mix/error.hrx index 3dc0313d4..cf5b481d4 100644 --- a/spec/core_functions/color/mix/error.hrx +++ b/spec/core_functions/color/mix/error.hrx @@ -36,7 +36,7 @@ Error: Missing argument $color2. a {b: mix(lch(20% -20 0), red)} <===> null_method/non_legacy/color1/error -Error: $color1: To use color.mix() with non-legacy color lch(20% -20 0deg), you must provide a $method. +Error: $color1: To use color.mix() with non-legacy color lch(20% 0 0deg), you must provide a $method. , 1 | a {b: mix(lch(20% -20 0), red)} | ^^^^^^^^^^^^^^^^^^^^^^^^ @@ -49,7 +49,7 @@ Error: $color1: To use color.mix() with non-legacy color lch(20% -20 0deg), you a {b: mix(red, lch(20% -20 0))} <===> null_method/non_legacy/color2/error -Error: $color2: To use color.mix() with non-legacy color lch(20% -20 0deg), you must provide a $method. +Error: $color2: To use color.mix() with non-legacy color lch(20% 0 0deg), you must provide a $method. , 1 | a {b: mix(red, lch(20% -20 0))} | ^^^^^^^^^^^^^^^^^^^^^^^^ diff --git a/spec/core_functions/color/mix/hue_interpolation.hrx b/spec/core_functions/color/mix/hue_interpolation.hrx index 052c47412..df1c19a67 100644 --- a/spec/core_functions/color/mix/hue_interpolation.hrx +++ b/spec/core_functions/color/mix/hue_interpolation.hrx @@ -13,5 +13,5 @@ a {b: mix(red, green, 20%, lch increasing hue)} <===> increasing/weighted/output.css a { - b: rgb(75.3627215695, 127.0940173535, -38.3383580918); + b: hsl(78.7622147036, 186.3907911016%, 17.4030704435%); } diff --git a/spec/core_functions/color/mix/mixed_spaces.hrx b/spec/core_functions/color/mix/mixed_spaces.hrx index 9c321d2be..e26fa61dc 100644 --- a/spec/core_functions/color/mix/mixed_spaces.hrx +++ b/spec/core_functions/color/mix/mixed_spaces.hrx @@ -3,5 +3,5 @@ a {b: mix(hsl(0 100% 50%), green, $method: lch)} <===> output.css a { - b: hsl(49.4586711601, 100%, 27.8089044382%); + b: hsl(50.9351301875, 199.2813015981%, 19.0269267557%); } diff --git a/spec/core_functions/color/mix/predefined.hrx b/spec/core_functions/color/mix/predefined.hrx index 1f0de2dda..504ea9ba7 100644 --- a/spec/core_functions/color/mix/predefined.hrx +++ b/spec/core_functions/color/mix/predefined.hrx @@ -13,7 +13,7 @@ a {b: mix(color(display-p3 1 0 0), color(display-p3 0 1 0), 60%, $method: hsl)} <===> rgb_explicit_method/output.css a { - b: color(display-p3 0.9849707148 0.9141322646 0.3079881122); + b: color(display-p3 1.0849635599 0.8595336595 -0.252822726); } <===> @@ -33,5 +33,5 @@ a {b: mix(color(xyz-d50 0.15 0.24 0), color(xyz-d65 1 .2 0), $method: hwb)} <===> xyz_explicit_method/output.css a { - b: color(xyz-d50 0.3464867621 0.2923393699 0.0410088495); + b: color(xyz-d50 0.5250037958 0.2975068714 -0.1396614468); } diff --git a/spec/core_functions/color/oklab/_utils.scss b/spec/core_functions/color/oklab/_utils.scss deleted file mode 100644 index 106fe41df..000000000 --- a/spec/core_functions/color/oklab/_utils.scss +++ /dev/null @@ -1,27 +0,0 @@ -@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, 'a') - -real-channel($color, 'b'), - -real-channel($color, 'alpha') - ); - } - } -} diff --git a/spec/core_functions/color/oklab/alpha.hrx b/spec/core_functions/color/oklab/alpha.hrx index 6ff6a6287..ee7f24dac 100644 --- a/spec/core_functions/color/oklab/alpha.hrx +++ b/spec/core_functions/color/oklab/alpha.hrx @@ -1,58 +1,63 @@ <===> transparent/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(0 255 127 / 0)); <===> transparent/output.css a { value: oklab(0% 255 127 / 0); + space: oklab; channels: 0% 255 127 / 0; } <===> ================================================================================ <===> opaque/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(1% 2 3 / 1)); <===> opaque/output.css a { value: oklab(1% 2 3); + space: oklab; channels: 1% 2 3 / 1; } <===> ================================================================================ <===> partial/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(1% 2 3 / 0.4)); <===> partial/output.css a { value: oklab(1% 2 3 / 0.4); + space: oklab; channels: 1% 2 3 / 0.4; } <===> ================================================================================ <===> percent/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(1% 2 3 / 40%)); <===> percent/output.css a { value: oklab(1% 2 3 / 0.4); + space: oklab; channels: 1% 2 3 / 0.4; } <===> ================================================================================ <===> named/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab($channels: 1% 2 3 / 0.4)); <===> named/output.css a { value: oklab(1% 2 3 / 0.4); + space: oklab; channels: 1% 2 3 / 0.4; } @@ -60,36 +65,39 @@ a { ================================================================================ <===> slash_list/input.scss @use "sass:list"; -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(list.slash(1% 2 3, 0.4))); <===> slash_list/output.css a { value: oklab(1% 2 3 / 0.4); + space: oklab; channels: 1% 2 3 / 0.4; } <===> ================================================================================ <===> none/slash/b/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(1% 2 none / 0.4)); <===> none/slash/b/output.css a { value: oklab(1% 2 none / 0.4); + space: oklab; channels: 1% 2 none / 0.4; } <===> ================================================================================ <===> none/slash/alpha/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(1% 2 3 / none)); <===> none/slash/alpha/output.css a { value: oklab(1% 2 3 / none); + space: oklab; channels: 1% 2 3 / none; } @@ -97,12 +105,13 @@ a { ================================================================================ <===> none/slash_list/b/input.scss @use 'sass:list'; -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(list.slash(1% 2 none, 0.4))); <===> none/slash_list/b/output.css a { value: oklab(1% 2 none / 0.4); + space: oklab; channels: 1% 2 none / 0.4; } @@ -110,19 +119,20 @@ a { ================================================================================ <===> none/slash_list/alpha/input.scss @use 'sass:list'; -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(list.slash(1% 2 3, none))); <===> none/slash_list/alpha/output.css a { value: oklab(1% 2 3 / none); + space: oklab; channels: 1% 2 3 / none; } <===> ================================================================================ <===> relative_color/slash/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(from #aaa l a b / 25%)); <===> relative_color/slash/output.css @@ -135,7 +145,7 @@ a { ================================================================================ <===> relative_color/slash_list/input.scss @use 'sass:list'; -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(list.slash(from #aaa l a b, 25%))); <===> relative_color/slash_list/output.css diff --git a/spec/core_functions/color/oklab/no_alpha.hrx b/spec/core_functions/color/oklab/no_alpha.hrx index ffd32248d..21698a935 100644 --- a/spec/core_functions/color/oklab/no_alpha.hrx +++ b/spec/core_functions/color/oklab/no_alpha.hrx @@ -1,185 +1,200 @@ <===> unitless/ab/in_range/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(1% 2 -3)); <===> unitless/ab/in_range/output.css a { value: oklab(1% 2 -3); + space: oklab; channels: 1% 2 -3 / 1; } <===> ================================================================================ <===> unitless/ab/above_range/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(1% 126 300)); <===> unitless/ab/above_range/output.css a { value: oklab(1% 126 300); + space: oklab; channels: 1% 126 300 / 1; } <===> ================================================================================ <===> unitless/ab/below_range/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(1% -126 -300)); <===> unitless/ab/below_range/output.css a { value: oklab(1% -126 -300); + space: oklab; channels: 1% -126 -300 / 1; } <===> ================================================================================ <===> unitless/lightness/in_range/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(0.1 2 -3)); <===> unitless/lightness/in_range/output.css a { value: oklab(10% 2 -3); + space: oklab; channels: 10% 2 -3 / 1; } <===> ================================================================================ <===> unitless/lightness/above_range/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(1.1 2 3)); <===> unitless/lightness/above_range/output.css a { value: oklab(100% 2 3); + space: oklab; channels: 100% 2 3 / 1; } <===> ================================================================================ <===> unitless/lightness/below_range/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(-0.1 2 3)); <===> unitless/lightness/below_range/output.css a { value: oklab(0% 2 3); + space: oklab; channels: 0% 2 3 / 1; } <===> ================================================================================ <===> percent/ab/in_range/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(1% 2% -3%)); <===> percent/ab/in_range/output.css a { value: oklab(1% 0.008 -0.012); + space: oklab; channels: 1% 0.008 -0.012 / 1; } <===> ================================================================================ <===> percent/ab/above_range/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(1% 101% 150%)); <===> percent/ab/above_range/output.css a { value: oklab(1% 0.404 0.6); + space: oklab; channels: 1% 0.404 0.6 / 1; } <===> ================================================================================ <===> percent/ab/below_range/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(1% -101% -150%)); <===> percent/ab/below_range/output.css a { value: oklab(1% -0.404 -0.6); + space: oklab; channels: 1% -0.404 -0.6 / 1; } <===> ================================================================================ <===> percent/lightness/in_range/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(1% 2% -3%)); <===> percent/lightness/in_range/output.css a { value: oklab(1% 0.008 -0.012); + space: oklab; channels: 1% 0.008 -0.012 / 1; } <===> ================================================================================ <===> percent/lightness/above_range/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(110% 2 3)); <===> percent/lightness/above_range/output.css a { value: oklab(100% 2 3); + space: oklab; channels: 100% 2 3 / 1; } <===> ================================================================================ <===> percent/lightness/below_range/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(-1% 2 3)); <===> percent/lightness/below_range/output.css a { value: oklab(0% 2 3); + space: oklab; channels: 0% 2 3 / 1; } <===> ================================================================================ <===> none/lightness/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(none 2 3)); <===> none/lightness/output.css a { value: oklab(none 2 3); + space: oklab; channels: none 2 3 / 1; } <===> ================================================================================ <===> none/a/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(1% none 3)); <===> none/a/output.css a { value: oklab(1% none 3); + space: oklab; channels: 1% none 3 / 1; } <===> ================================================================================ <===> none/b/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(1% 2 none)); <===> none/b/output.css a { value: oklab(1% 2 none); + space: oklab; channels: 1% 2 none / 1; } <===> ================================================================================ <===> relative_color/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(from #aaa l a b)); <===> relative_color/output.css @@ -191,11 +206,12 @@ a { <===> ================================================================================ <===> named/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab($channels: 1% 2 3)); <===> named/output.css a { value: oklab(1% 2 3); + space: oklab; channels: 1% 2 3 / 1; } diff --git a/spec/core_functions/color/oklab/special_functions.hrx b/spec/core_functions/color/oklab/special_functions.hrx index 089f5057f..16f4e4ebe 100644 --- a/spec/core_functions/color/oklab/special_functions.hrx +++ b/spec/core_functions/color/oklab/special_functions.hrx @@ -1,5 +1,5 @@ <===> calculation/arg_1/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(calc(1px + 1%) 2 3)); <===> calculation/arg_1/output.css @@ -11,7 +11,7 @@ a { <===> ================================================================================ <===> calculation/arg_2/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(1% calc(1px + 1%) 3)); <===> calculation/arg_2/output.css @@ -23,7 +23,7 @@ a { <===> ================================================================================ <===> calculation/arg_3/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(1% 2 calc(1px + 1%))); <===> calculation/arg_3/output.css @@ -35,7 +35,7 @@ a { <===> ================================================================================ <===> calculation/arg_4/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(1% 2 3 / calc(1px + 1%))); <===> calculation/arg_4/output.css @@ -47,7 +47,7 @@ a { <===> ================================================================================ <===> var/arg_1/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(var(--foo) 2 3)); <===> var/arg_1/output.css @@ -59,7 +59,7 @@ a { <===> ================================================================================ <===> var/arg_2/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(1% var(--foo) 3)); <===> var/arg_2/output.css @@ -71,7 +71,7 @@ a { <===> ================================================================================ <===> var/arg_3/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(1% 2 var(--foo))); <===> var/arg_3/output.css @@ -83,7 +83,7 @@ a { <===> ================================================================================ <===> var/arg_4/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(1% 2 3 / var(--foo))); <===> var/arg_4/output.css @@ -96,7 +96,7 @@ a { ================================================================================ <===> multi_argument_var/1_of_2/input.scss // var() is substituted before parsing, so it may contain multiple arguments. -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(var(--foo) 2)); <===> multi_argument_var/1_of_2/output.css @@ -108,7 +108,7 @@ a { <===> ================================================================================ <===> multi_argument_var/2_of_2/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(1% var(--foo))); <===> multi_argument_var/2_of_2/output.css @@ -120,7 +120,7 @@ a { <===> ================================================================================ <===> multi_argument_var/1_of_1/no_alpha/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(var(--foo))); <===> multi_argument_var/1_of_1/no_alpha/output.css @@ -132,7 +132,7 @@ a { <===> ================================================================================ <===> multi_argument_var/1_of_1/alpha/input.scss -@use 'core_functions/color/oklab/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklab(var(--foo) / 0.4)); <===> multi_argument_var/1_of_1/alpha/output.css diff --git a/spec/core_functions/color/oklch/_utils.scss b/spec/core_functions/color/oklch/_utils.scss deleted file mode 100644 index 508c32e30..000000000 --- a/spec/core_functions/color/oklch/_utils.scss +++ /dev/null @@ -1,27 +0,0 @@ -@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 index acb10b5a4..8ac85be2f 100644 --- a/spec/core_functions/color/oklch/alpha.hrx +++ b/spec/core_functions/color/oklch/alpha.hrx @@ -1,58 +1,63 @@ <===> transparent/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(1% 0.2 3deg / 0)); <===> transparent/output.css a { value: oklch(1% 0.2 3deg / 0); + space: oklch; channels: 1% 0.2 3deg / 0; } <===> ================================================================================ <===> opaque/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(1% 0.2 3deg / 1)); <===> opaque/output.css a { value: oklch(1% 0.2 3deg); + space: oklch; channels: 1% 0.2 3deg / 1; } <===> ================================================================================ <===> partial/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(1% 0.2 3deg / 0.4)); <===> partial/output.css a { value: oklch(1% 0.2 3deg / 0.4); + space: oklch; channels: 1% 0.2 3deg / 0.4; } <===> ================================================================================ <===> percent/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(1% 0.2 3deg / 40%)); <===> percent/output.css a { value: oklch(1% 0.2 3deg / 0.4); + space: oklch; channels: 1% 0.2 3deg / 0.4; } <===> ================================================================================ <===> named/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch($channels: 1% 0.2 3deg / 0.4)); <===> named/output.css a { value: oklch(1% 0.2 3deg / 0.4); + space: oklch; channels: 1% 0.2 3deg / 0.4; } @@ -60,36 +65,39 @@ a { ================================================================================ <===> slash_list/input.scss @use "sass:list"; -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/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); + space: oklch; channels: 1% 0.2 3deg / 0.4; } <===> ================================================================================ <===> none/slash/hue/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/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); + space: oklch; channels: 1% 0.2 none / 0.4; } <===> ================================================================================ <===> none/slash/alpha/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(1% 0.2 3deg / none)); <===> none/slash/alpha/output.css a { value: oklch(1% 0.2 3deg / none); + space: oklch; channels: 1% 0.2 3deg / none; } @@ -97,12 +105,13 @@ a { ================================================================================ <===> none/slash_list/hue/input.scss @use 'sass:list'; -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/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); + space: oklch; channels: 1% 0.2 none / 0.4; } @@ -110,11 +119,12 @@ a { ================================================================================ <===> none/slash_list/alpha/input.scss @use 'sass:list'; -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/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); + space: oklch; channels: 1% 0.2 3deg / none; } diff --git a/spec/core_functions/color/oklch/no_alpha.hrx b/spec/core_functions/color/oklch/no_alpha.hrx index 9b24e8e78..2c8c27848 100644 --- a/spec/core_functions/color/oklch/no_alpha.hrx +++ b/spec/core_functions/color/oklch/no_alpha.hrx @@ -1,189 +1,205 @@ <===> unitless/in_range/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(0.1 0.2 3deg)); <===> unitless/in_range/output.css a { value: oklch(10% 0.2 3deg); + space: oklch; channels: 10% 0.2 3deg / 1; } <===> ================================================================================ <===> unitless/lightness/above_range/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(1.1 0.2 3deg)); <===> unitless/lightness/above_range/output.css a { value: oklch(100% 0.2 3deg); + space: oklch; channels: 100% 0.2 3deg / 1; } <===> ================================================================================ <===> unitless/lightness/below_range/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(-0.1 0.2 3deg)); <===> unitless/lightness/below_range/output.css a { value: oklch(0% 0.2 3deg); + space: oklch; channels: 0% 0.2 3deg / 1; } <===> ================================================================================ <===> unitless/chroma/above_range/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(1% 0.5 3deg)); <===> unitless/chroma/above_range/output.css a { value: oklch(1% 0.5 3deg); + space: oklch; channels: 1% 0.5 3deg / 1; } <===> ================================================================================ <===> unitless/chroma/below_range/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/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; + value: oklch(1% 0 3deg); + space: oklch; + channels: 1% 0 3deg / 1; } <===> ================================================================================ <===> unitless/hue/above_range/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(1% 0.2 361deg)); <===> unitless/hue/above_range/output.css a { value: oklch(1% 0.2 1deg); + space: oklch; channels: 1% 0.2 1deg / 1; } <===> ================================================================================ <===> unitless/hue/below_range/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(1% 0.2 -1deg)); <===> unitless/hue/below_range/output.css a { value: oklch(1% 0.2 359deg); + space: oklch; channels: 1% 0.2 359deg / 1; } <===> ================================================================================ <===> percent/in_range/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(1% 2% 3deg)); <===> percent/in_range/output.css a { value: oklch(1% 0.008 3deg); + space: oklch; channels: 1% 0.008 3deg / 1; } <===> ================================================================================ <===> percent/lightness/above_range/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(110% 0.2 3deg)); <===> percent/lightness/above_range/output.css a { value: oklch(100% 0.2 3deg); + space: oklch; channels: 100% 0.2 3deg / 1; } <===> ================================================================================ <===> percent/lightness/below_range/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(-1% 0.2 3deg)); <===> percent/lightness/below_range/output.css a { value: oklch(0% 0.2 3deg); + space: oklch; channels: 0% 0.2 3deg / 1; } <===> ================================================================================ <===> percent/chroma/above_range/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(1% 101% 3deg)); <===> percent/chroma/above_range/output.css a { value: oklch(1% 0.404 3deg); + space: oklch; channels: 1% 0.404 3deg / 1; } <===> ================================================================================ <===> percent/chroma/below_range/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/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; + value: oklch(1% 0 3deg); + space: oklch; + channels: 1% 0 3deg / 1; } <===> ================================================================================ <===> none/lightness/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(none 0.2 3deg)); <===> none/lightness/output.css a { value: oklch(none 0.2 3deg); + space: oklch; channels: none 0.2 3deg / 1; } <===> ================================================================================ <===> none/chroma/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(1% none 3deg)); <===> none/chroma/output.css a { value: oklch(1% none 3deg); + space: oklch; channels: 1% none 3deg / 1; } <===> ================================================================================ <===> none/hue/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(1% 0.2 none)); <===> none/hue/output.css a { value: oklch(1% 0.2 none); + space: oklch; channels: 1% 0.2 none / 1; } <===> ================================================================================ <===> named/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch($channels: 1% 0.2 3deg)); <===> named/output.css a { value: oklch(1% 0.2 3deg); + space: oklch; channels: 1% 0.2 3deg / 1; } diff --git a/spec/core_functions/color/oklch/special_functions.hrx b/spec/core_functions/color/oklch/special_functions.hrx index 8955526c4..60100e9e3 100644 --- a/spec/core_functions/color/oklch/special_functions.hrx +++ b/spec/core_functions/color/oklch/special_functions.hrx @@ -1,5 +1,5 @@ <===> calculation/arg_1/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(calc(1px + 1%) 0.2 3deg)); <===> calculation/arg_1/output.css @@ -11,7 +11,7 @@ a { <===> ================================================================================ <===> calculation/arg_2/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(1% calc(1px + 1%) 3deg)); <===> calculation/arg_2/output.css @@ -23,7 +23,7 @@ a { <===> ================================================================================ <===> calculation/arg_3/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(1% 0.2 calc(1px + 1%))); <===> calculation/arg_3/output.css @@ -35,7 +35,7 @@ a { <===> ================================================================================ <===> calculation/arg_4/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(1% 0.2 3deg / calc(1px + 1%))); <===> calculation/arg_4/output.css @@ -47,7 +47,7 @@ a { <===> ================================================================================ <===> var/arg_1/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(var(--foo) 0.2 3deg)); <===> var/arg_1/output.css @@ -59,7 +59,7 @@ a { <===> ================================================================================ <===> var/arg_2/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(1% var(--foo) 3deg)); <===> var/arg_2/output.css @@ -71,7 +71,7 @@ a { <===> ================================================================================ <===> var/arg_3/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(1% 0.2 var(--foo))); <===> var/arg_3/output.css @@ -83,7 +83,7 @@ a { <===> ================================================================================ <===> var/arg_4/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(1% 0.2 3deg / var(--foo))); <===> var/arg_4/output.css @@ -96,7 +96,7 @@ a { ================================================================================ <===> 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'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(var(--foo) 2deg)); <===> multi_argument_var/1_of_2/output.css @@ -108,7 +108,7 @@ a { <===> ================================================================================ <===> multi_argument_var/2_of_2/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(1% var(--foo))); <===> multi_argument_var/2_of_2/output.css @@ -120,7 +120,7 @@ a { <===> ================================================================================ <===> multi_argument_var/1_of_1/no_alpha/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(var(--foo))); <===> multi_argument_var/1_of_1/no_alpha/output.css @@ -132,7 +132,7 @@ a { <===> ================================================================================ <===> multi_argument_var/1_of_1/alpha/input.scss -@use 'core_functions/color/lch/utils'; +@use 'core_functions/color/utils'; @include utils.inspect(oklch(var(--foo) / 0.4)); <===> multi_argument_var/1_of_1/alpha/output.css diff --git a/spec/libsass/color-functions/rgb/rgb/b.hrx b/spec/libsass/color-functions/rgb/rgb/b.hrx index 0195a80e5..76c94c4e9 100644 --- a/spec/libsass/color-functions/rgb/rgb/b.hrx +++ b/spec/libsass/color-functions/rgb/rgb/b.hrx @@ -368,7 +368,7 @@ foo { <===> output.css foo { - c-1: rgb(0, 0, -1); + c-1: hsl(240, 100%, -0.1960784314%); c0: rgb(0, 0, 0); c1: rgb(0, 0, 1); c2: rgb(0, 0, 2); @@ -625,11 +625,11 @@ foo { c253: rgb(0, 0, 253); c254: rgb(0, 0, 254); c255: rgb(0, 0, 255); - c256: rgb(0, 0, 256); + c256: hsl(240, 100.7874015748%, 50.1960784314%); } foo { - c-1: rgb(0, 0, -2.55); + c-1: hsl(240, 100%, -0.5%); c0: rgb(0, 0, 0); c1: rgb(0, 0, 2.55); c2: rgb(0, 0, 5.1); @@ -731,5 +731,5 @@ foo { c98: rgb(0, 0, 249.9); c99: rgb(0, 0, 252.45); c100: rgb(0, 0, 255); - c101: rgb(0, 0, 257.55); + c101: hsl(240, 102.0202020202%, 50.5%); } diff --git a/spec/libsass/color-functions/rgb/rgb/g.hrx b/spec/libsass/color-functions/rgb/rgb/g.hrx index d8ec64afd..76a788de9 100644 --- a/spec/libsass/color-functions/rgb/rgb/g.hrx +++ b/spec/libsass/color-functions/rgb/rgb/g.hrx @@ -368,7 +368,7 @@ foo { <===> output.css foo { - c-1: rgb(0, -1, 0); + c-1: hsl(120, 100%, -0.1960784314%); c0: rgb(0, 0, 0); c1: rgb(0, 1, 0); c2: rgb(0, 2, 0); @@ -625,11 +625,11 @@ foo { c253: rgb(0, 253, 0); c254: rgb(0, 254, 0); c255: rgb(0, 255, 0); - c256: rgb(0, 256, 0); + c256: hsl(120, 100.7874015748%, 50.1960784314%); } foo { - c-1: rgb(0, -2.55, 0); + c-1: hsl(120, 100%, -0.5%); c0: rgb(0, 0, 0); c1: rgb(0, 2.55, 0); c2: rgb(0, 5.1, 0); @@ -731,5 +731,5 @@ foo { c98: rgb(0, 249.9, 0); c99: rgb(0, 252.45, 0); c100: rgb(0, 255, 0); - c101: rgb(0, 257.55, 0); + c101: hsl(120, 102.0202020202%, 50.5%); } diff --git a/spec/libsass/color-functions/rgb/rgb/r.hrx b/spec/libsass/color-functions/rgb/rgb/r.hrx index f01d48830..79c6ee6d0 100644 --- a/spec/libsass/color-functions/rgb/rgb/r.hrx +++ b/spec/libsass/color-functions/rgb/rgb/r.hrx @@ -368,7 +368,7 @@ foo { <===> output.css foo { - c-1: rgb(0, -1, 0); + c-1: hsl(120, 100%, -0.1960784314%); c0: rgb(0, 0, 0); c1: rgb(0, 1, 0); c2: rgb(0, 2, 0); @@ -625,11 +625,11 @@ foo { c253: rgb(0, 253, 0); c254: rgb(0, 254, 0); c255: rgb(0, 255, 0); - c256: rgb(0, 256, 0); + c256: hsl(120, 100.7874015748%, 50.1960784314%); } foo { - c-1: rgb(-2.55, 0, 0); + c-1: hsl(0, 100%, -0.5%); c0: rgb(0, 0, 0); c1: rgb(2.55, 0, 0); c2: rgb(5.1, 0, 0); @@ -731,5 +731,5 @@ foo { c98: rgb(249.9, 0, 0); c99: rgb(252.45, 0, 0); c100: rgb(255, 0, 0); - c101: rgb(257.55, 0, 0); + c101: hsl(0, 102.0202020202%, 50.5%); } diff --git a/spec/libsass/color-functions/rgb/rgba/b.hrx b/spec/libsass/color-functions/rgb/rgba/b.hrx index 70a2db62f..dd6243cf4 100644 --- a/spec/libsass/color-functions/rgb/rgba/b.hrx +++ b/spec/libsass/color-functions/rgb/rgba/b.hrx @@ -368,7 +368,7 @@ foo { <===> output.css foo { - c-1: rgb(0, 0, -1); + c-1: hsl(240, 100%, -0.1960784314%); c0: rgb(0, 0, 0); c1: rgb(0, 0, 1); c2: rgb(0, 0, 2); @@ -625,11 +625,11 @@ foo { c253: rgb(0, 0, 253); c254: rgb(0, 0, 254); c255: rgb(0, 0, 255); - c256: rgb(0, 0, 256); + c256: hsl(240, 100.7874015748%, 50.1960784314%); } foo { - c-1: rgb(0, 0, -2.55); + c-1: hsl(240, 100%, -0.5%); c0: rgb(0, 0, 0); c1: rgb(0, 0, 2.55); c2: rgb(0, 0, 5.1); @@ -731,5 +731,5 @@ foo { c98: rgb(0, 0, 249.9); c99: rgb(0, 0, 252.45); c100: rgb(0, 0, 255); - c101: rgb(0, 0, 257.55); + c101: hsl(240, 102.0202020202%, 50.5%); } diff --git a/spec/libsass/color-functions/rgb/rgba/g.hrx b/spec/libsass/color-functions/rgb/rgba/g.hrx index e0273defd..05a6cf09d 100644 --- a/spec/libsass/color-functions/rgb/rgba/g.hrx +++ b/spec/libsass/color-functions/rgb/rgba/g.hrx @@ -368,7 +368,7 @@ foo { <===> output.css foo { - c-1: rgb(0, -1, 0); + c-1: hsl(120, 100%, -0.1960784314%); c0: rgb(0, 0, 0); c1: rgb(0, 1, 0); c2: rgb(0, 2, 0); @@ -625,11 +625,11 @@ foo { c253: rgb(0, 253, 0); c254: rgb(0, 254, 0); c255: rgb(0, 255, 0); - c256: rgb(0, 256, 0); + c256: hsl(120, 100.7874015748%, 50.1960784314%); } foo { - c-1: rgb(0, -2.55, 0); + c-1: hsl(120, 100%, -0.5%); c0: rgb(0, 0, 0); c1: rgb(0, 2.55, 0); c2: rgb(0, 5.1, 0); @@ -731,5 +731,5 @@ foo { c98: rgb(0, 249.9, 0); c99: rgb(0, 252.45, 0); c100: rgb(0, 255, 0); - c101: rgb(0, 257.55, 0); + c101: hsl(120, 102.0202020202%, 50.5%); } diff --git a/spec/libsass/color-functions/rgb/rgba/r.hrx b/spec/libsass/color-functions/rgb/rgba/r.hrx index 1655f8d08..cd32932bf 100644 --- a/spec/libsass/color-functions/rgb/rgba/r.hrx +++ b/spec/libsass/color-functions/rgb/rgba/r.hrx @@ -368,7 +368,7 @@ foo { <===> output.css foo { - c-1: rgb(0, -1, 0); + c-1: hsl(120, 100%, -0.1960784314%); c0: rgb(0, 0, 0); c1: rgb(0, 1, 0); c2: rgb(0, 2, 0); @@ -625,11 +625,11 @@ foo { c253: rgb(0, 253, 0); c254: rgb(0, 254, 0); c255: rgb(0, 255, 0); - c256: rgb(0, 256, 0); + c256: hsl(120, 100.7874015748%, 50.1960784314%); } foo { - c-1: rgb(-2.55, 0, 0); + c-1: hsl(0, 100%, -0.5%); c0: rgb(0, 0, 0); c1: rgb(2.55, 0, 0); c2: rgb(5.1, 0, 0); @@ -731,5 +731,5 @@ foo { c98: rgb(249.9, 0, 0); c99: rgb(252.45, 0, 0); c100: rgb(255, 0, 0); - c101: rgb(257.55, 0, 0); + c101: hsl(0, 102.0202020202%, 50.5%); } diff --git a/spec/non_conformant/colors/basic.hrx b/spec/non_conformant/colors/basic.hrx index 79abb2d83..a79f20723 100644 --- a/spec/non_conformant/colors/basic.hrx +++ b/spec/non_conformant/colors/basic.hrx @@ -14,5 +14,5 @@ p { color: red green blue; color: redhux; color: redgreen; - foo: rgb(200, 382.5, 433.5); + foo: hsl(13.1049250535, 189.0688259109%, 124.2156862745%); } From cec35e7ff995d40cb6425e6a43fe0a7e462d4e00 Mon Sep 17 00:00:00 2001 From: Natalie Weizenbaum Date: Fri, 29 Mar 2024 14:52:12 -0700 Subject: [PATCH 10/18] Poke CI From 70397f6bc98697bed86ce47ef0b6e547c1850566 Mon Sep 17 00:00:00 2001 From: Natalie Weizenbaum Date: Fri, 29 Mar 2024 16:10:58 -0700 Subject: [PATCH 11/18] Test negative lightness of lab/oklab --- spec/core_functions/color/to_space/lab/a98_rgb.hrx | 4 ++-- .../color/to_space/lab/display_p3.hrx | 4 ++-- spec/core_functions/color/to_space/lab/hsl.hrx | 4 ++-- spec/core_functions/color/to_space/lab/hwb.hrx | 4 ++-- spec/core_functions/color/to_space/lab/lch.hrx | 4 ++-- spec/core_functions/color/to_space/lab/oklab.hrx | 13 +++++++------ spec/core_functions/color/to_space/lab/oklch.hrx | 13 +++++++------ .../color/to_space/lab/prophoto_rgb.hrx | 4 ++-- spec/core_functions/color/to_space/lab/rec2020.hrx | 4 ++-- spec/core_functions/color/to_space/lab/rgb.hrx | 4 ++-- spec/core_functions/color/to_space/lab/srgb.hrx | 4 ++-- .../color/to_space/lab/srgb_linear.hrx | 4 ++-- spec/core_functions/color/to_space/lab/xyz.hrx | 4 ++-- spec/core_functions/color/to_space/lab/xyz_d50.hrx | 4 ++-- .../core_functions/color/to_space/oklab/a98_rgb.hrx | 4 ++-- .../color/to_space/oklab/display_p3.hrx | 4 ++-- spec/core_functions/color/to_space/oklab/hsl.hrx | 4 ++-- spec/core_functions/color/to_space/oklab/hwb.hrx | 4 ++-- spec/core_functions/color/to_space/oklab/lab.hrx | 13 +++++++------ spec/core_functions/color/to_space/oklab/lch.hrx | 10 +++------- spec/core_functions/color/to_space/oklab/oklab.hrx | 4 ++-- spec/core_functions/color/to_space/oklab/oklch.hrx | 13 +++++++------ .../color/to_space/oklab/prophoto_rgb.hrx | 4 ++-- .../core_functions/color/to_space/oklab/rec2020.hrx | 4 ++-- spec/core_functions/color/to_space/oklab/rgb.hrx | 4 ++-- spec/core_functions/color/to_space/oklab/srgb.hrx | 4 ++-- .../color/to_space/oklab/srgb_linear.hrx | 4 ++-- spec/core_functions/color/to_space/oklab/xyz.hrx | 4 ++-- .../core_functions/color/to_space/oklab/xyz_d50.hrx | 4 ++-- 29 files changed, 79 insertions(+), 79 deletions(-) diff --git a/spec/core_functions/color/to_space/lab/a98_rgb.hrx b/spec/core_functions/color/to_space/lab/a98_rgb.hrx index 1c92cb137..76ea6d2bf 100644 --- a/spec/core_functions/color/to_space/lab/a98_rgb.hrx +++ b/spec/core_functions/color/to_space/lab/a98_rgb.hrx @@ -44,11 +44,11 @@ a { ================================================================================ <===> out_of_range/near/input.scss @use 'sass:color'; -a {b: color.to-space(lab(50% -150 150), a98-rgb)} +a {b: color.to-space(color.change(lab(0% -150 150), $lightness: -50%), a98-rgb)} <===> out_of_range/near/output.css a { - b: color(a98-rgb -0.2867930305 0.6069046769 -0.3002974486); + b: color(a98-rgb -0.3527883779 -0.1750269182 -0.4390573819); } <===> diff --git a/spec/core_functions/color/to_space/lab/display_p3.hrx b/spec/core_functions/color/to_space/lab/display_p3.hrx index 525daebee..455c576c9 100644 --- a/spec/core_functions/color/to_space/lab/display_p3.hrx +++ b/spec/core_functions/color/to_space/lab/display_p3.hrx @@ -44,11 +44,11 @@ a { ================================================================================ <===> out_of_range/near/input.scss @use 'sass:color'; -a {b: color.to-space(lab(50% -150 150), display-p3)} +a {b: color.to-space(color.change(lab(0% -150 150), $lightness: -50%), display-p3)} <===> out_of_range/near/output.css a { - b: color(display-p3 -0.3868043645 0.5969497019 -0.2718795767); + b: color(display-p3 -0.3704020725 -0.1731154433 -0.4345219765); } <===> diff --git a/spec/core_functions/color/to_space/lab/hsl.hrx b/spec/core_functions/color/to_space/lab/hsl.hrx index f6ed43772..bb7b47371 100644 --- a/spec/core_functions/color/to_space/lab/hsl.hrx +++ b/spec/core_functions/color/to_space/lab/hsl.hrx @@ -44,11 +44,11 @@ a { ================================================================================ <===> out_of_range/near/input.scss @use 'sass:color'; -a {b: color.to-space(lab(50% -150 150), hsl)} +a {b: color.to-space(color.change(lab(0% -150 150), $lightness: -50%), hsl)} <===> out_of_range/near/output.css a { - b: hsl(129.6414856733, 1083.1736448296%, 5.177606711%); + b: hsl(289.8791142497, 47.7721599837%, -30.374201454%); } <===> diff --git a/spec/core_functions/color/to_space/lab/hwb.hrx b/spec/core_functions/color/to_space/lab/hwb.hrx index 3c69df6ba..7ca3d0c5d 100644 --- a/spec/core_functions/color/to_space/lab/hwb.hrx +++ b/spec/core_functions/color/to_space/lab/hwb.hrx @@ -44,11 +44,11 @@ a { ================================================================================ <===> out_of_range/near/input.scss @use 'sass:color'; -a {b: color.to-space(lab(50% -150 150), hwb)} +a {b: color.to-space(color.change(lab(0% -150 150), $lightness: -50%), hwb)} <===> out_of_range/near/output.css a { - b: hsl(129.6414856733, 1083.1736448296%, 5.177606711%); + b: hsl(289.8791142497, 47.7721599837%, -30.374201454%); } <===> diff --git a/spec/core_functions/color/to_space/lab/lch.hrx b/spec/core_functions/color/to_space/lab/lch.hrx index c7d03aba8..01f3db756 100644 --- a/spec/core_functions/color/to_space/lab/lch.hrx +++ b/spec/core_functions/color/to_space/lab/lch.hrx @@ -44,11 +44,11 @@ a { ================================================================================ <===> out_of_range/near/input.scss @use 'sass:color'; -a {b: color.to-space(lab(50% -150 150), lch)} +a {b: color.to-space(color.change(lab(0% -150 150), $lightness: -50%), lch)} <===> out_of_range/near/output.css a { - b: lch(50% 212.132034356 135deg); + b: lch(-50% 212.132034356 135deg); } <===> diff --git a/spec/core_functions/color/to_space/lab/oklab.hrx b/spec/core_functions/color/to_space/lab/oklab.hrx index 9b9c87a36..e35a5f177 100644 --- a/spec/core_functions/color/to_space/lab/oklab.hrx +++ b/spec/core_functions/color/to_space/lab/oklab.hrx @@ -44,23 +44,24 @@ a { ================================================================================ <===> out_of_range/near/input.scss @use 'sass:color'; -a {b: color.to-space(lab(50% -150 150), oklab)} +a {b: color.to-space(color.change(lab(0% -150 150), $lightness: -50%), oklab)} <===> out_of_range/near/output.css a { - b: oklab(53.0498197384% -0.3654345733 0.2307464671); + b: oklab(-39.9330761333% -0.1030518317 0.0848187875); } <===> ================================================================================ -<===> out_of_range/far/options.yml -:todo: - - dart-sass - <===> out_of_range/far/input.scss @use 'sass:color'; a {b: color.to-space(lab(50% -999999 0), oklab)} +<===> out_of_range/far/output.css +a { + b: oklab(-204.6361483967% -9.8154760573 0.8330217301); +} + <===> ================================================================================ <===> alpha/partial/input.scss diff --git a/spec/core_functions/color/to_space/lab/oklch.hrx b/spec/core_functions/color/to_space/lab/oklch.hrx index edd9be9d7..6f3ef889b 100644 --- a/spec/core_functions/color/to_space/lab/oklch.hrx +++ b/spec/core_functions/color/to_space/lab/oklch.hrx @@ -44,23 +44,24 @@ a { ================================================================================ <===> out_of_range/near/input.scss @use 'sass:color'; -a {b: color.to-space(lab(50% -150 150), oklch)} +a {b: color.to-space(color.change(lab(0% -150 150), $lightness: -50%), oklch)} <===> out_of_range/near/output.css a { - b: oklch(53.0498197384% 0.4321878752 147.7304438462deg); + b: oklch(-39.9330761333% 0.1334687481 140.5432562845deg); } <===> ================================================================================ -<===> out_of_range/far/options.yml -:todo: - - dart-sass - <===> out_of_range/far/input.scss @use 'sass:color'; a {b: color.to-space(lab(50% -999999 0), oklch)} +<===> out_of_range/far/output.css +a { + b: oklch(-204.6361483967% 9.8507611602 175.149034898deg); +} + <===> ================================================================================ <===> alpha/partial/input.scss diff --git a/spec/core_functions/color/to_space/lab/prophoto_rgb.hrx b/spec/core_functions/color/to_space/lab/prophoto_rgb.hrx index e4a270365..a749af49c 100644 --- a/spec/core_functions/color/to_space/lab/prophoto_rgb.hrx +++ b/spec/core_functions/color/to_space/lab/prophoto_rgb.hrx @@ -44,11 +44,11 @@ a { ================================================================================ <===> out_of_range/near/input.scss @use 'sass:color'; -a {b: color.to-space(lab(50% -150 150), prophoto-rgb)} +a {b: color.to-space(color.change(lab(0% -150 150), $lightness: -50%), prophoto-rgb)} <===> out_of_range/near/output.css a { - b: color(prophoto-rgb -0.1140960735 0.4800565041 -0.1694709542); + b: color(prophoto-rgb -0.2802411013 -0.1595613747 -0.3507026734); } <===> diff --git a/spec/core_functions/color/to_space/lab/rec2020.hrx b/spec/core_functions/color/to_space/lab/rec2020.hrx index d1cebc9b9..46bdeca5a 100644 --- a/spec/core_functions/color/to_space/lab/rec2020.hrx +++ b/spec/core_functions/color/to_space/lab/rec2020.hrx @@ -44,11 +44,11 @@ a { ================================================================================ <===> out_of_range/near/input.scss @use 'sass:color'; -a {b: color.to-space(lab(50% -150 150), rec2020)} +a {b: color.to-space(color.change(lab(0% -150 150), $lightness: -50%), rec2020)} <===> out_of_range/near/output.css a { - b: color(rec2020 -0.1395629235 0.5307299781 -0.1948126993); + b: color(rec2020 -0.2868532205 -0.1310027915 -0.3772590396); } <===> diff --git a/spec/core_functions/color/to_space/lab/rgb.hrx b/spec/core_functions/color/to_space/lab/rgb.hrx index bfef6ce38..7a0d2828f 100644 --- a/spec/core_functions/color/to_space/lab/rgb.hrx +++ b/spec/core_functions/color/to_space/lab/rgb.hrx @@ -44,11 +44,11 @@ a { ================================================================================ <===> out_of_range/near/input.scss @use 'sass:color'; -a {b: color.to-space(lab(50% -150 150), rgb)} +a {b: color.to-space(color.change(lab(0% -150 150), $lightness: -50%), rgb)} <===> out_of_range/near/output.css a { - b: hsl(129.6414856733, 1083.1736448296%, 5.177606711%); + b: hsl(289.8791142497, 47.7721599837%, -30.374201454%); } <===> diff --git a/spec/core_functions/color/to_space/lab/srgb.hrx b/spec/core_functions/color/to_space/lab/srgb.hrx index cb66657e5..051129a68 100644 --- a/spec/core_functions/color/to_space/lab/srgb.hrx +++ b/spec/core_functions/color/to_space/lab/srgb.hrx @@ -44,11 +44,11 @@ a { ================================================================================ <===> out_of_range/near/input.scss @use 'sass:color'; -a {b: color.to-space(lab(50% -150 150), srgb)} +a {b: color.to-space(color.change(lab(0% -150 150), $lightness: -50%), srgb)} <===> out_of_range/near/output.css a { - b: color(srgb -0.5090486462 0.6126007804 -0.3288091982); + b: color(srgb -0.3998933946 -0.1586378934 -0.4488461357); } <===> diff --git a/spec/core_functions/color/to_space/lab/srgb_linear.hrx b/spec/core_functions/color/to_space/lab/srgb_linear.hrx index 7e424b144..b1571e3e3 100644 --- a/spec/core_functions/color/to_space/lab/srgb_linear.hrx +++ b/spec/core_functions/color/to_space/lab/srgb_linear.hrx @@ -44,11 +44,11 @@ a { ================================================================================ <===> out_of_range/near/input.scss @use 'sass:color'; -a {b: color.to-space(lab(50% -150 150), srgb-linear)} +a {b: color.to-space(color.change(lab(0% -150 150), $lightness: -50%), srgb-linear)} <===> out_of_range/near/output.css a { - b: color(srgb-linear -0.2225122082 0.3334529028 -0.0883224293); + b: color(srgb-linear -0.1327936201 -0.0216482097 -0.1697106644); } <===> diff --git a/spec/core_functions/color/to_space/lab/xyz.hrx b/spec/core_functions/color/to_space/lab/xyz.hrx index 198e3a33a..f7a95e1c2 100644 --- a/spec/core_functions/color/to_space/lab/xyz.hrx +++ b/spec/core_functions/color/to_space/lab/xyz.hrx @@ -44,11 +44,11 @@ a { ================================================================================ <===> out_of_range/near/input.scss @use 'sass:color'; -a {b: color.to-space(lab(50% -150 150), xyz)} +a {b: color.to-space(color.change(lab(0% -150 150), $lightness: -50%), xyz)} <===> out_of_range/near/output.css a { - b: color(xyz 0.0115350469 0.1847840965 -0.0485088066); + b: color(xyz -0.0931334424 -0.0559710307 -0.1664628061); } <===> diff --git a/spec/core_functions/color/to_space/lab/xyz_d50.hrx b/spec/core_functions/color/to_space/lab/xyz_d50.hrx index 0fa0a44fe..5a8efed97 100644 --- a/spec/core_functions/color/to_space/lab/xyz_d50.hrx +++ b/spec/core_functions/color/to_space/lab/xyz_d50.hrx @@ -44,11 +44,11 @@ a { ================================================================================ <===> out_of_range/near/input.scss @use 'sass:color'; -a {b: color.to-space(lab(50% -150 150), xyz-d50)} +a {b: color.to-space(color.change(lab(0% -150 150), $lightness: -50%), xyz-d50)} <===> out_of_range/near/output.css a { - b: color(xyz-d50 0.018762903 0.1841865185 -0.0337971831); + b: color(xyz-d50 -0.0905265235 -0.055352823 -0.1251409211); } <===> diff --git a/spec/core_functions/color/to_space/oklab/a98_rgb.hrx b/spec/core_functions/color/to_space/oklab/a98_rgb.hrx index b60330f61..b9912f977 100644 --- a/spec/core_functions/color/to_space/oklab/a98_rgb.hrx +++ b/spec/core_functions/color/to_space/oklab/a98_rgb.hrx @@ -44,11 +44,11 @@ a { ================================================================================ <===> out_of_range/near/input.scss @use 'sass:color'; -a {b: color.to-space(oklab(50% -2 2), a98-rgb)} +a {b: color.to-space(color.change(oklab(0% -2 2), $lightness: -50%), a98-rgb)} <===> out_of_range/near/output.css a { - b: color(a98-rgb -0.8953481069 1.6153083897 -3.014009118); + b: color(a98-rgb -1.6915317691 2.7130844081 -5.3317336738); } <===> diff --git a/spec/core_functions/color/to_space/oklab/display_p3.hrx b/spec/core_functions/color/to_space/oklab/display_p3.hrx index 0b4d332d7..1ed003395 100644 --- a/spec/core_functions/color/to_space/oklab/display_p3.hrx +++ b/spec/core_functions/color/to_space/oklab/display_p3.hrx @@ -44,11 +44,11 @@ a { ================================================================================ <===> out_of_range/near/input.scss @use 'sass:color'; -a {b: color.to-space(oklab(50% -2 2), display-p3)} +a {b: color.to-space(color.change(oklab(0% -2 2), $lightness: -50%), display-p3)} <===> out_of_range/near/output.css a { - b: color(display-p3 -1.13414471 1.5411090766 -2.7763098547); + b: color(display-p3 -2.0082801891 2.5077633347 -4.7222178033); } <===> diff --git a/spec/core_functions/color/to_space/oklab/hsl.hrx b/spec/core_functions/color/to_space/oklab/hsl.hrx index 5380ad85c..4c79f22e5 100644 --- a/spec/core_functions/color/to_space/oklab/hsl.hrx +++ b/spec/core_functions/color/to_space/oklab/hsl.hrx @@ -44,11 +44,11 @@ a { ================================================================================ <===> out_of_range/near/input.scss @use 'sass:color'; -a {b: color.to-space(oklab(50% -2 2), hsl)} +a {b: color.to-space(color.change(oklab(0% -2 2), $lightness: -50%), hsl)} <===> out_of_range/near/output.css a { - b: hsl(280.1310039328, 338.5767145732%, -66.3157250379%); + b: hsl(280.1786410944, 318.2272126608%, -118.134272113%); } <===> diff --git a/spec/core_functions/color/to_space/oklab/hwb.hrx b/spec/core_functions/color/to_space/oklab/hwb.hrx index c26650e30..7ece44fb5 100644 --- a/spec/core_functions/color/to_space/oklab/hwb.hrx +++ b/spec/core_functions/color/to_space/oklab/hwb.hrx @@ -44,11 +44,11 @@ a { ================================================================================ <===> out_of_range/near/input.scss @use 'sass:color'; -a {b: color.to-space(oklab(50% -2 2), hwb)} +a {b: color.to-space(color.change(oklab(0% -2 2), $lightness: -50%), hwb)} <===> out_of_range/near/output.css a { - b: hsl(280.1310039328, 338.5767145732%, -66.3157250379%); + b: hsl(280.1786410944, 318.2272126608%, -118.134272113%); } <===> diff --git a/spec/core_functions/color/to_space/oklab/lab.hrx b/spec/core_functions/color/to_space/oklab/lab.hrx index 2e9c40a7d..f765acac0 100644 --- a/spec/core_functions/color/to_space/oklab/lab.hrx +++ b/spec/core_functions/color/to_space/oklab/lab.hrx @@ -48,23 +48,24 @@ a { ================================================================================ <===> out_of_range/near/input.scss @use 'sass:color'; -a {b: color.to-space(oklab(50% -2 2), lab)} +a {b: color.to-space(color.change(oklab(0% -2 2), $lightness: -50%), lab)} <===> out_of_range/near/output.css a { - b: lab(93.303705573% -6771.9585744642 15769.0769791975); + b: lab(133.0510823608% -24857.7899135327 55090.5043177819); } <===> ================================================================================ -<===> out_of_range/far/options.yml -:todo: - - dart-sass - <===> out_of_range/far/input.scss @use 'sass:color'; a {b: color.to-space(oklab(50% -999999 0), lab)} +<===> out_of_range/far/output.css +a { + b: lab(12909434.201534431% -325857647808268600000 -13773107.564308008); +} + <===> ================================================================================ <===> alpha/partial/input.scss diff --git a/spec/core_functions/color/to_space/oklab/lch.hrx b/spec/core_functions/color/to_space/oklab/lch.hrx index 7011ef32b..9ea7e3b55 100644 --- a/spec/core_functions/color/to_space/oklab/lch.hrx +++ b/spec/core_functions/color/to_space/oklab/lch.hrx @@ -48,26 +48,22 @@ a { ================================================================================ <===> out_of_range/near/input.scss @use 'sass:color'; -a {b: color.to-space(oklab(50% -2 2), lch)} +a {b: color.to-space(color.change(oklab(0% -2 2), $lightness: -50%), lch)} <===> out_of_range/near/output.css a { - b: lch(93.303705573% 17161.6785807833 113.240884837deg); + b: lch(133.0510823608% 60439.0054962264 114.2857209699deg); } <===> ================================================================================ -<===> out_of_range/far/options.yml -:todo: - - dart-sass - <===> out_of_range/far/input.scss @use 'sass:color'; a {b: color.to-space(oklab(50% -999999 0), lch)} <===> out_of_range/far/output.css a { - b: lch(50% 999999 180deg); + b: lch(12909434.201534431% 325857647808268600000 180deg); } <===> diff --git a/spec/core_functions/color/to_space/oklab/oklab.hrx b/spec/core_functions/color/to_space/oklab/oklab.hrx index 136acf6ea..5d3a626a8 100644 --- a/spec/core_functions/color/to_space/oklab/oklab.hrx +++ b/spec/core_functions/color/to_space/oklab/oklab.hrx @@ -11,11 +11,11 @@ a { ================================================================================ <===> out_of_range/input.scss @use 'sass:color'; -a {b: color.to-space(oklab(50% -2 2), oklab)} +a {b: color.to-space(color.change(oklab(0% -2 2), $lightness: -50%), oklab)} <===> out_of_range/output.css a { - b: oklab(50% -2 2); + b: oklab(-50% -2 2); } <===> diff --git a/spec/core_functions/color/to_space/oklab/oklch.hrx b/spec/core_functions/color/to_space/oklab/oklch.hrx index fb31d8a91..b474ff6b1 100644 --- a/spec/core_functions/color/to_space/oklab/oklch.hrx +++ b/spec/core_functions/color/to_space/oklab/oklch.hrx @@ -44,23 +44,24 @@ a { ================================================================================ <===> out_of_range/near/input.scss @use 'sass:color'; -a {b: color.to-space(oklab(50% -2 2), oklch)} +a {b: color.to-space(color.change(oklab(0% -2 2), $lightness: -50%), oklch)} <===> out_of_range/near/output.css a { - b: oklch(50% 2.8284271247 135deg); + b: oklch(-50% 2.8284271247 135deg); } <===> ================================================================================ -<===> out_of_range/far/options.yml -:todo: - - dart-sass - <===> out_of_range/far/input.scss @use 'sass:color'; a {b: color.to-space(oklab(50% -999999 0), oklch)} +<===> out_of_range/far/output.css +a { + b: oklch(50% 999999 180deg); +} + <===> ================================================================================ <===> alpha/partial/input.scss diff --git a/spec/core_functions/color/to_space/oklab/prophoto_rgb.hrx b/spec/core_functions/color/to_space/oklab/prophoto_rgb.hrx index 4cb5ed17c..bcbbeb6d8 100644 --- a/spec/core_functions/color/to_space/oklab/prophoto_rgb.hrx +++ b/spec/core_functions/color/to_space/oklab/prophoto_rgb.hrx @@ -44,11 +44,11 @@ a { ================================================================================ <===> out_of_range/near/input.scss @use 'sass:color'; -a {b: color.to-space(oklab(50% -2 2), prophoto-rgb)} +a {b: color.to-space(color.change(oklab(0% -2 2), $lightness: -50%), prophoto-rgb)} <===> out_of_range/near/output.css a { - b: color(prophoto-rgb -1.4344246827 1.449741205 -3.5981874982); + b: color(prophoto-rgb -2.9829710472 2.6753284297 -7.2338243089); } <===> diff --git a/spec/core_functions/color/to_space/oklab/rec2020.hrx b/spec/core_functions/color/to_space/oklab/rec2020.hrx index c8f2c25f2..48593816b 100644 --- a/spec/core_functions/color/to_space/oklab/rec2020.hrx +++ b/spec/core_functions/color/to_space/oklab/rec2020.hrx @@ -44,11 +44,11 @@ a { ================================================================================ <===> out_of_range/near/input.scss @use 'sass:color'; -a {b: color.to-space(oklab(50% -2 2), rec2020)} +a {b: color.to-space(color.change(oklab(0% -2 2), $lightness: -50%), rec2020)} <===> out_of_range/near/output.css a { - b: color(rec2020 -0.9884282298 1.5152602347 -3.0630021095); + b: color(rec2020 -1.92504049 2.5779941201 -5.465676751); } <===> diff --git a/spec/core_functions/color/to_space/oklab/rgb.hrx b/spec/core_functions/color/to_space/oklab/rgb.hrx index bb235eb8e..7776479d2 100644 --- a/spec/core_functions/color/to_space/oklab/rgb.hrx +++ b/spec/core_functions/color/to_space/oklab/rgb.hrx @@ -44,11 +44,11 @@ a { ================================================================================ <===> out_of_range/near/input.scss @use 'sass:color'; -a {b: color.to-space(oklab(50% -2 2), rgb)} +a {b: color.to-space(color.change(oklab(0% -2 2), $lightness: -50%), rgb)} <===> out_of_range/near/output.css a { - b: hsl(280.1310039328, 338.5767145732%, -66.3157250379%); + b: hsl(280.1786410944, 318.2272126608%, -118.134272113%); } <===> diff --git a/spec/core_functions/color/to_space/oklab/srgb.hrx b/spec/core_functions/color/to_space/oklab/srgb.hrx index 44d83be54..4dca47bf1 100644 --- a/spec/core_functions/color/to_space/oklab/srgb.hrx +++ b/spec/core_functions/color/to_space/oklab/srgb.hrx @@ -44,11 +44,11 @@ a { ================================================================================ <===> out_of_range/near/input.scss @use 'sass:color'; -a {b: color.to-space(oklab(50% -2 2), srgb)} +a {b: color.to-space(color.change(oklab(0% -2 2), $lightness: -50%), srgb)} <===> out_of_range/near/output.css a { - b: color(srgb -1.4213940143 1.5821387804 -2.9084532812); + b: color(srgb -2.4568465628 2.5780112923 -4.9406967346); } <===> diff --git a/spec/core_functions/color/to_space/oklab/srgb_linear.hrx b/spec/core_functions/color/to_space/oklab/srgb_linear.hrx index 3a84fbdb4..907d122d5 100644 --- a/spec/core_functions/color/to_space/oklab/srgb_linear.hrx +++ b/spec/core_functions/color/to_space/oklab/srgb_linear.hrx @@ -44,11 +44,11 @@ a { ================================================================================ <===> out_of_range/near/input.scss @use 'sass:color'; -a {b: color.to-space(oklab(50% -2 2), srgb-linear)} +a {b: color.to-space(color.change(oklab(0% -2 2), $lightness: -50%), srgb-linear)} <===> out_of_range/near/output.css a { - b: color(srgb-linear -2.2401626848 2.8707758733 -11.9264035632); + b: color(srgb-linear -8.0200588156 8.9800887523 -41.7661704476); } <===> diff --git a/spec/core_functions/color/to_space/oklab/xyz.hrx b/spec/core_functions/color/to_space/oklab/xyz.hrx index 76968c14e..6599ab53c 100644 --- a/spec/core_functions/color/to_space/oklab/xyz.hrx +++ b/spec/core_functions/color/to_space/oklab/xyz.hrx @@ -44,11 +44,11 @@ a { ================================================================================ <===> out_of_range/near/input.scss @use 'sass:color'; -a {b: color.to-space(oklab(50% -2 2), xyz)} +a {b: color.to-space(color.change(oklab(0% -2 2), $lightness: -50%), xyz)} <===> out_of_range/near/output.css a { - b: color(xyz -2.0497647038 0.7157483349 -11.0375527282); + b: color(xyz -7.6342507319 1.7017043263 -38.7847424885); } <===> diff --git a/spec/core_functions/color/to_space/oklab/xyz_d50.hrx b/spec/core_functions/color/to_space/oklab/xyz_d50.hrx index 56386fb04..378dec988 100644 --- a/spec/core_functions/color/to_space/oklab/xyz_d50.hrx +++ b/spec/core_functions/color/to_space/oklab/xyz_d50.hrx @@ -44,11 +44,11 @@ a { ================================================================================ <===> out_of_range/near/input.scss @use 'sass:color'; -a {b: color.to-space(oklab(50% -2 2), xyz-d50)} +a {b: color.to-space(color.change(oklab(0% -2 2), $lightness: -50%), xyz-d50)} <===> out_of_range/near/output.css a { - b: color(xyz-d50 -1.5775855307 0.8366247125 -8.2691302395); + b: color(xyz-d50 -6.0144158738 2.1214433281 -29.0650672146); } <===> From 136b3d8747297fc1a7cbd2be742ab52673053119 Mon Sep 17 00:00:00 2001 From: Natalie Weizenbaum Date: Fri, 29 Mar 2024 16:58:30 -0700 Subject: [PATCH 12/18] Add specs for HSL --- .../color/to_space/hsl/a98_rgb.hrx | 129 ++++++++++++++++++ .../color/to_space/hsl/display_p3.hrx | 129 ++++++++++++++++++ .../core_functions/color/to_space/hsl/hsl.hrx | 52 +++++++ .../core_functions/color/to_space/hsl/hwb.hrx | 129 ++++++++++++++++++ .../core_functions/color/to_space/hsl/lab.hrx | 129 ++++++++++++++++++ .../core_functions/color/to_space/hsl/lch.hrx | 129 ++++++++++++++++++ .../color/to_space/hsl/oklab.hrx | 129 ++++++++++++++++++ .../color/to_space/hsl/oklch.hrx | 129 ++++++++++++++++++ .../color/to_space/hsl/prophoto_rgb.hrx | 129 ++++++++++++++++++ .../color/to_space/hsl/rec2020.hrx | 129 ++++++++++++++++++ .../core_functions/color/to_space/hsl/rgb.hrx | 129 ++++++++++++++++++ .../color/to_space/hsl/srgb.hrx | 129 ++++++++++++++++++ .../color/to_space/hsl/srgb_linear.hrx | 129 ++++++++++++++++++ .../core_functions/color/to_space/hsl/xyz.hrx | 129 ++++++++++++++++++ .../color/to_space/hsl/xyz_d50.hrx | 129 ++++++++++++++++++ 15 files changed, 1858 insertions(+) create mode 100644 spec/core_functions/color/to_space/hsl/a98_rgb.hrx create mode 100644 spec/core_functions/color/to_space/hsl/display_p3.hrx create mode 100644 spec/core_functions/color/to_space/hsl/hsl.hrx create mode 100644 spec/core_functions/color/to_space/hsl/hwb.hrx create mode 100644 spec/core_functions/color/to_space/hsl/lab.hrx create mode 100644 spec/core_functions/color/to_space/hsl/lch.hrx create mode 100644 spec/core_functions/color/to_space/hsl/oklab.hrx create mode 100644 spec/core_functions/color/to_space/hsl/oklch.hrx create mode 100644 spec/core_functions/color/to_space/hsl/prophoto_rgb.hrx create mode 100644 spec/core_functions/color/to_space/hsl/rec2020.hrx create mode 100644 spec/core_functions/color/to_space/hsl/rgb.hrx create mode 100644 spec/core_functions/color/to_space/hsl/srgb.hrx create mode 100644 spec/core_functions/color/to_space/hsl/srgb_linear.hrx create mode 100644 spec/core_functions/color/to_space/hsl/xyz.hrx create mode 100644 spec/core_functions/color/to_space/hsl/xyz_d50.hrx diff --git a/spec/core_functions/color/to_space/hsl/a98_rgb.hrx b/spec/core_functions/color/to_space/hsl/a98_rgb.hrx new file mode 100644 index 000000000..3a29b9188 --- /dev/null +++ b/spec/core_functions/color/to_space/hsl/a98_rgb.hrx @@ -0,0 +1,129 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(0deg 0% 0%), a98-rgb)} + +<===> black/output.css +a { + b: color(a98-rgb 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(0deg 0% 100%), a98-rgb)} + +<===> white/output.css +a { + b: color(a98-rgb 1 1 1); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(0deg 0% 50%), a98-rgb)} + +<===> gray/output.css +a { + b: color(a98-rgb 0.4961036984 0.4961036984 0.4961036984); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(80deg 30% 60%), a98-rgb)} + +<===> middle/output.css +a { + b: color(a98-rgb 0.6581397554 0.7142002384 0.4892168037); +} + +<===> +================================================================================ +<===> float/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(20.123456789deg 30.987654321% 60.192837465%), a98-rgb)} + +<===> float/output.css +a { + b: color(a98-rgb 0.6777775446 0.5562111042 0.4789015947); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(20deg 200% -50%), a98-rgb)} + +<===> out_of_range/near/output.css +a { + b: color(a98-rgb -1.3133426101 -0.1822173447 0.4856606142); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(20deg 999999% 50%), a98-rgb)} + +<===> out_of_range/far/output.css +a { + b: color(a98-rgb 8698.1693722094 -3093.7862337018 -10082.3258830858); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(10deg 20% 30% / 0.4), a98-rgb)} + +<===> alpha/partial/output.css +a { + b: color(a98-rgb 0.3376779392 0.2673823092 0.2497033225 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(10deg 20% 30% / 0.0), a98-rgb)} + +<===> alpha/transparent/output.css +a { + b: color(a98-rgb 0.3376779392 0.2673823092 0.2497033225 / 0); +} + +<===> +================================================================================ +<===> missing/hue/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(none 20% 30%), a98-rgb)} + +<===> missing/hue/output.css +a { + b: color(a98-rgb 0.333838384 0.2489105042 0.2489105042); +} + +<===> +================================================================================ +<===> missing/saturation/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(10deg none 30%), a98-rgb)} + +<===> missing/saturation/output.css +a { + b: color(a98-rgb 0.3046424286 0.3046424286 0.3046424286); +} + +<===> +================================================================================ +<===> missing/lightness/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(10deg 20% none), a98-rgb)} + +<===> missing/lightness/output.css +a { + b: color(a98-rgb 0 0 0); +} diff --git a/spec/core_functions/color/to_space/hsl/display_p3.hrx b/spec/core_functions/color/to_space/hsl/display_p3.hrx new file mode 100644 index 000000000..0a7daa376 --- /dev/null +++ b/spec/core_functions/color/to_space/hsl/display_p3.hrx @@ -0,0 +1,129 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(0deg 0% 0%), display-p3)} + +<===> black/output.css +a { + b: color(display-p3 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(0deg 0% 100%), display-p3)} + +<===> white/output.css +a { + b: color(display-p3 1 1 1); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(0deg 0% 50%), display-p3)} + +<===> gray/output.css +a { + b: color(display-p3 0.5 0.5 0.5); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(80deg 30% 60%), display-p3)} + +<===> middle/output.css +a { + b: color(display-p3 0.655133397 0.7175281483 0.505602812); +} + +<===> +================================================================================ +<===> float/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(20.123456789deg 30.987654321% 60.192837465%), display-p3)} + +<===> float/output.css +a { + b: color(display-p3 0.6997472063 0.5677618984 0.490693255); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(20deg 200% -50%), display-p3)} + +<===> out_of_range/near/output.css +a { + b: color(display-p3 -1.3795832908 -0.3608862783 0.4233635373); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(20deg 999999% 50%), display-p3)} + +<===> out_of_range/far/output.css +a { + b: color(display-p3 4579.6059857545 -1251.0810767168 -4781.6821693604); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(10deg 20% 30% / 0.4), display-p3)} + +<===> alpha/partial/output.css +a { + b: color(display-p3 0.3447505085 0.2640504184 0.244140094 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(10deg 20% 30% / 0.0), display-p3)} + +<===> alpha/transparent/output.css +a { + b: color(display-p3 0.3447505085 0.2640504184 0.244140094 / 0); +} + +<===> +================================================================================ +<===> missing/hue/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(none 20% 30%), display-p3)} + +<===> missing/hue/output.css +a { + b: color(display-p3 0.3423085422 0.2451135243 0.2426469173); +} + +<===> +================================================================================ +<===> missing/saturation/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(10deg none 30%), display-p3)} + +<===> missing/saturation/output.css +a { + b: color(display-p3 0.3 0.3 0.3); +} + +<===> +================================================================================ +<===> missing/lightness/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(10deg 20% none), display-p3)} + +<===> missing/lightness/output.css +a { + b: color(display-p3 0 0 0); +} diff --git a/spec/core_functions/color/to_space/hsl/hsl.hrx b/spec/core_functions/color/to_space/hsl/hsl.hrx new file mode 100644 index 000000000..2739692da --- /dev/null +++ b/spec/core_functions/color/to_space/hsl/hsl.hrx @@ -0,0 +1,52 @@ +<===> in_range/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(0deg 20% 40%), hsl)} + +<===> in_range/output.css +a { + b: hsl(0, 20%, 40%); +} + +<===> +================================================================================ +<===> out_of_range/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(20deg 200% -50%), hsl)} + +<===> out_of_range/output.css +a { + b: hsl(20, 200%, -50%); +} + +<===> +================================================================================ +<===> missing/hue/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(none 20% 30%), hsl)} + +<===> missing/hue/output.css +a { + b: hsl(none 20% 30%); +} + +<===> +================================================================================ +<===> missing/saturation/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(10deg none 30%), hsl)} + +<===> missing/saturation/output.css +a { + b: hsl(10deg none 30%); +} + +<===> +================================================================================ +<===> missing/lightness/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(10deg 20% none), hsl)} + +<===> missing/lightness/output.css +a { + b: hsl(10deg 20% none); +} diff --git a/spec/core_functions/color/to_space/hsl/hwb.hrx b/spec/core_functions/color/to_space/hsl/hwb.hrx new file mode 100644 index 000000000..0e2cfb1a1 --- /dev/null +++ b/spec/core_functions/color/to_space/hsl/hwb.hrx @@ -0,0 +1,129 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(0deg 0% 0%), hwb)} + +<===> black/output.css +a { + b: black; +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(0deg 0% 100%), hwb)} + +<===> white/output.css +a { + b: white; +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(0deg 0% 50%), hwb)} + +<===> gray/output.css +a { + b: hsl(0, 0%, 50%); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(80deg 30% 60%), hwb)} + +<===> middle/output.css +a { + b: hsl(80, 30%, 60%); +} + +<===> +================================================================================ +<===> float/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(20.123456789deg 30.987654321% 60.192837465%), hwb)} + +<===> float/output.css +a { + b: hsl(20.123456789, 30.987654321%, 60.192837465%); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(20deg 200% -50%), hwb)} + +<===> out_of_range/near/output.css +a { + b: hsl(20, 200%, -50%); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(20deg 999999% 50%), hwb)} + +<===> out_of_range/far/output.css +a { + b: hsl(20, 999999%, 50%); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(10deg 20% 30% / 0.4), hwb)} + +<===> alpha/partial/output.css +a { + b: hsla(10, 20%, 30%, 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(10deg 20% 30% / 0.0), hwb)} + +<===> alpha/transparent/output.css +a { + b: hsla(10, 20%, 30%, 0); +} + +<===> +================================================================================ +<===> missing/hue/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(none 20% 30%), hwb)} + +<===> missing/hue/output.css +a { + b: hsl(0, 20%, 30%); +} + +<===> +================================================================================ +<===> missing/saturation/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(10deg none 30%), hwb)} + +<===> missing/saturation/output.css +a { + b: hsl(0, 0%, 30%); +} + +<===> +================================================================================ +<===> missing/lightness/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(10deg 20% none), hwb)} + +<===> missing/lightness/output.css +a { + b: black; +} diff --git a/spec/core_functions/color/to_space/hsl/lab.hrx b/spec/core_functions/color/to_space/hsl/lab.hrx new file mode 100644 index 000000000..fecfd6c5d --- /dev/null +++ b/spec/core_functions/color/to_space/hsl/lab.hrx @@ -0,0 +1,129 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(0deg 0% 0%), lab)} + +<===> black/output.css +a { + b: lab(0% 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(0deg 0% 100%), lab)} + +<===> white/output.css +a { + b: lab(100% 0 0); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(0deg 0% 50%), lab)} + +<===> gray/output.css +a { + b: lab(53.3889647411% 0 0); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(80deg 30% 60%), lab)} + +<===> middle/output.css +a { + b: lab(71.9297767616% -15.056348508 28.7197360328); +} + +<===> +================================================================================ +<===> float/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(20.123456789deg 30.987654321% 60.192837465%), lab)} + +<===> float/output.css +a { + b: lab(63.0942649983% 14.1332827511 17.6588648805); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(20deg 200% -50%), lab)} + +<===> out_of_range/near/output.css +a { + b: lab(-513.5065001156% -2166.8947364799 -961.5323237913); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(20deg 999999% 50%), lab)} + +<===> out_of_range/far/output.css +a { + b: lab(48551.8202334035% 74362.5384197241 885141454894.8618); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(10deg 20% 30% / 0.4), lab)} + +<===> alpha/partial/output.css +a { + b: lab(30.8688486066% 10.7899742234 7.6662278505 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(10deg 20% 30% / 0.0), lab)} + +<===> alpha/transparent/output.css +a { + b: lab(30.8688486066% 10.7899742234 7.6662278505 / 0); +} + +<===> +================================================================================ +<===> missing/hue/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(none 20% 30%), lab)} + +<===> missing/hue/output.css +a { + b: lab(29.467709003% 13.8451863493 5.7231513228); +} + +<===> +================================================================================ +<===> missing/saturation/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(10deg none 30%), lab)} + +<===> missing/saturation/output.css +a { + b: lab(32.5331750598% 0 0); +} + +<===> +================================================================================ +<===> missing/lightness/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(10deg 20% none), lab)} + +<===> missing/lightness/output.css +a { + b: lab(none 0 0); +} diff --git a/spec/core_functions/color/to_space/hsl/lch.hrx b/spec/core_functions/color/to_space/hsl/lch.hrx new file mode 100644 index 000000000..82403d967 --- /dev/null +++ b/spec/core_functions/color/to_space/hsl/lch.hrx @@ -0,0 +1,129 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(0deg 0% 0%), lch)} + +<===> black/output.css +a { + b: lch(0% 0 none); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(0deg 0% 100%), lch)} + +<===> white/output.css +a { + b: lch(100% 0 none); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(0deg 0% 50%), lch)} + +<===> gray/output.css +a { + b: lch(53.3889647411% 0 none); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(80deg 30% 60%), lch)} + +<===> middle/output.css +a { + b: lch(71.9297767616% 32.4271008292 117.6658176085deg); +} + +<===> +================================================================================ +<===> float/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(20.123456789deg 30.987654321% 60.192837465%), lch)} + +<===> float/output.css +a { + b: lch(63.0942649983% 22.6182490522 51.3279458157deg); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(20deg 200% -50%), lch)} + +<===> out_of_range/near/output.css +a { + b: lch(-513.5065001156% 2370.649111252 203.9286535376deg); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(20deg 999999% 50%), lch)} + +<===> out_of_range/far/output.css +a { + b: lch(48551.8202334035% 885141454894.8649 89.9999951865deg); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(10deg 20% 30% / 0.4), lch)} + +<===> alpha/partial/output.css +a { + b: lch(30.8688486066% 13.2361094434 35.393621554deg / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(10deg 20% 30% / 0.0), lch)} + +<===> alpha/transparent/output.css +a { + b: lch(30.8688486066% 13.2361094434 35.393621554deg / 0); +} + +<===> +================================================================================ +<===> missing/hue/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(none 20% 30%), lch)} + +<===> missing/hue/output.css +a { + b: lch(29.467709003% 14.981443392 none); +} + +<===> +================================================================================ +<===> missing/saturation/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(10deg none 30%), lch)} + +<===> missing/saturation/output.css +a { + b: lch(32.5331750598% none none); +} + +<===> +================================================================================ +<===> missing/lightness/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(10deg 20% none), lch)} + +<===> missing/lightness/output.css +a { + b: lch(none 0 none); +} diff --git a/spec/core_functions/color/to_space/hsl/oklab.hrx b/spec/core_functions/color/to_space/hsl/oklab.hrx new file mode 100644 index 000000000..36fe87bd5 --- /dev/null +++ b/spec/core_functions/color/to_space/hsl/oklab.hrx @@ -0,0 +1,129 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(0deg 0% 0%), oklab)} + +<===> black/output.css +a { + b: oklab(0% 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(0deg 0% 100%), oklab)} + +<===> white/output.css +a { + b: oklab(99.9999993474% 0.0000000001 0.0000000373); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(0deg 0% 50%), oklab)} + +<===> gray/output.css +a { + b: oklab(59.8180726623% 0 0.0000000223); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(80deg 30% 60%), oklab)} + +<===> middle/output.css +a { + b: oklab(75.0578295808% -0.0474046375 0.0717748467); +} + +<===> +================================================================================ +<===> float/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(20.123456789deg 30.987654321% 60.192837465%), oklab)} + +<===> float/output.css +a { + b: oklab(68.4523446414% 0.0396042277 0.0440734803); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(20deg 200% -50%), oklab)} + +<===> out_of_range/near/output.css +a { + b: oklab(-85.4424007146% -0.2487806208 -0.2899766738); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(20deg 999999% 50%), oklab)} + +<===> out_of_range/far/output.css +a { + b: oklab(39340.6349854451% 49.0298431734 858.3776182776); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(10deg 20% 30% / 0.4), oklab)} + +<===> alpha/partial/output.css +a { + b: oklab(40.6685296273% 0.0313239047 0.0191932237 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(10deg 20% 30% / 0.0), oklab)} + +<===> alpha/transparent/output.css +a { + b: oklab(40.6685296273% 0.0313239047 0.0191932237 / 0); +} + +<===> +================================================================================ +<===> missing/hue/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(none 20% 30%), oklab)} + +<===> missing/hue/output.css +a { + b: oklab(39.5815064245% 0.0409008812 0.014221487); +} + +<===> +================================================================================ +<===> missing/saturation/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(10deg none 30%), oklab)} + +<===> missing/saturation/output.css +a { + b: oklab(41.838943744% 0 0.0000000156); +} + +<===> +================================================================================ +<===> missing/lightness/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(10deg 20% none), oklab)} + +<===> missing/lightness/output.css +a { + b: oklab(none 0 0); +} diff --git a/spec/core_functions/color/to_space/hsl/oklch.hrx b/spec/core_functions/color/to_space/hsl/oklch.hrx new file mode 100644 index 000000000..48a93275a --- /dev/null +++ b/spec/core_functions/color/to_space/hsl/oklch.hrx @@ -0,0 +1,129 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(0deg 0% 0%), oklch)} + +<===> black/output.css +a { + b: oklch(0% 0 none); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(0deg 0% 100%), oklch)} + +<===> white/output.css +a { + b: oklch(99.9999993474% 0.0000000373 89.8755630959deg); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(0deg 0% 50%), oklch)} + +<===> gray/output.css +a { + b: oklch(59.8180726623% 0.0000000223 89.8755628286deg); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(80deg 30% 60%), oklch)} + +<===> middle/output.css +a { + b: oklch(75.0578295808% 0.0860164419 123.4432897448deg); +} + +<===> +================================================================================ +<===> float/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(20.123456789deg 30.987654321% 60.192837465%), oklch)} + +<===> float/output.css +a { + b: oklch(68.4523446414% 0.0592534093 48.0572806164deg); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(20deg 200% -50%), oklch)} + +<===> out_of_range/near/output.css +a { + b: oklch(-85.4424007146% 0.3820710257 229.3726104717deg); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(20deg 999999% 50%), oklch)} + +<===> out_of_range/far/output.css +a { + b: oklch(39340.6349854451% 859.7767507217 86.7308631003deg); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(10deg 20% 30% / 0.4), oklch)} + +<===> alpha/partial/output.css +a { + b: oklch(40.6685296273% 0.0367364512 31.4972209471deg / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(10deg 20% 30% / 0.0), oklch)} + +<===> alpha/transparent/output.css +a { + b: oklch(40.6685296273% 0.0367364512 31.4972209471deg / 0); +} + +<===> +================================================================================ +<===> missing/hue/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(none 20% 30%), oklch)} + +<===> missing/hue/output.css +a { + b: oklch(39.5815064245% 0.0433028033 none); +} + +<===> +================================================================================ +<===> missing/saturation/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(10deg none 30%), oklch)} + +<===> missing/saturation/output.css +a { + b: oklch(41.838943744% none 89.8755626743deg); +} + +<===> +================================================================================ +<===> missing/lightness/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(10deg 20% none), oklch)} + +<===> missing/lightness/output.css +a { + b: oklch(none 0 none); +} diff --git a/spec/core_functions/color/to_space/hsl/prophoto_rgb.hrx b/spec/core_functions/color/to_space/hsl/prophoto_rgb.hrx new file mode 100644 index 000000000..c06257a9b --- /dev/null +++ b/spec/core_functions/color/to_space/hsl/prophoto_rgb.hrx @@ -0,0 +1,129 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(0deg 0% 0%), prophoto-rgb)} + +<===> black/output.css +a { + b: color(prophoto-rgb 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(0deg 0% 100%), prophoto-rgb)} + +<===> white/output.css +a { + b: color(prophoto-rgb 1 1 1); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(0deg 0% 50%), prophoto-rgb)} + +<===> gray/output.css +a { + b: color(prophoto-rgb 0.4246723949 0.4246723949 0.4246723949); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(80deg 30% 60%), prophoto-rgb)} + +<===> middle/output.css +a { + b: color(prophoto-rgb 0.583675038 0.6482529636 0.4440565473); +} + +<===> +================================================================================ +<===> float/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(20.123456789deg 30.987654321% 60.192837465%), prophoto-rgb)} + +<===> float/output.css +a { + b: color(prophoto-rgb 0.5797795588 0.5061830996 0.4192105931); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(20deg 200% -50%), prophoto-rgb)} + +<===> out_of_range/near/output.css +a { + b: color(prophoto-rgb -1.16705518 -0.4773670849 0.334978827); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(20deg 999999% 50%), prophoto-rgb)} + +<===> out_of_range/far/output.css +a { + b: color(prophoto-rgb 45494.0440115899 5344.0720850434 -73058.7852099565); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(10deg 20% 30% / 0.4), prophoto-rgb)} + +<===> alpha/partial/output.css +a { + b: color(prophoto-rgb 0.2477526404 0.2091534142 0.1870234357 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(10deg 20% 30% / 0.0), prophoto-rgb)} + +<===> alpha/transparent/output.css +a { + b: color(prophoto-rgb 0.2477526404 0.2091534142 0.1870234357 / 0); +} + +<===> +================================================================================ +<===> missing/hue/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(none 20% 30%), prophoto-rgb)} + +<===> missing/hue/output.css +a { + b: color(prophoto-rgb 0.2432349971 0.1951926314 0.1850133783); +} + +<===> +================================================================================ +<===> missing/saturation/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(10deg none 30%), prophoto-rgb)} + +<===> missing/saturation/output.css +a { + b: color(prophoto-rgb 0.2340459828 0.2340459828 0.2340459828); +} + +<===> +================================================================================ +<===> missing/lightness/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(10deg 20% none), prophoto-rgb)} + +<===> missing/lightness/output.css +a { + b: color(prophoto-rgb 0 0 0); +} diff --git a/spec/core_functions/color/to_space/hsl/rec2020.hrx b/spec/core_functions/color/to_space/hsl/rec2020.hrx new file mode 100644 index 000000000..6c3b33cc5 --- /dev/null +++ b/spec/core_functions/color/to_space/hsl/rec2020.hrx @@ -0,0 +1,129 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(0deg 0% 0%), rec2020)} + +<===> black/output.css +a { + b: color(rec2020 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(0deg 0% 100%), rec2020)} + +<===> white/output.css +a { + b: color(rec2020 1 1 1); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(0deg 0% 50%), rec2020)} + +<===> gray/output.css +a { + b: color(rec2020 0.4500400319 0.4500400319 0.4500400319); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(80deg 30% 60%), rec2020)} + +<===> middle/output.css +a { + b: color(rec2020 0.6252433371 0.6805013998 0.4608722597); +} + +<===> +================================================================================ +<===> float/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(20.123456789deg 30.987654321% 60.192837465%), rec2020)} + +<===> float/output.css +a { + b: color(rec2020 0.6312163333 0.5293329902 0.4413441586); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(20deg 200% -50%), rec2020)} + +<===> out_of_range/near/output.css +a { + b: color(rec2020 -1.2552227887 -0.4270321041 0.3660380417); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(20deg 999999% 50%), rec2020)} + +<===> out_of_range/far/output.css +a { + b: color(rec2020 7903.4152677186 -1170.118178736 -9706.8206181475); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(10deg 20% 30% / 0.4), rec2020)} + +<===> alpha/partial/output.css +a { + b: color(rec2020 0.2670145784 0.2070036582 0.18272592 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(10deg 20% 30% / 0.0), rec2020)} + +<===> alpha/transparent/output.css +a { + b: color(rec2020 0.2670145784 0.2070036582 0.18272592 / 0); +} + +<===> +================================================================================ +<===> missing/hue/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(none 20% 30%), rec2020)} + +<===> missing/hue/output.css +a { + b: color(rec2020 0.2619751449 0.1889937521 0.1808798805); +} + +<===> +================================================================================ +<===> missing/saturation/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(10deg none 30%), rec2020)} + +<===> missing/saturation/output.css +a { + b: color(rec2020 0.2397416118 0.2397416118 0.2397416118); +} + +<===> +================================================================================ +<===> missing/lightness/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(10deg 20% none), rec2020)} + +<===> missing/lightness/output.css +a { + b: color(rec2020 0 0 0); +} diff --git a/spec/core_functions/color/to_space/hsl/rgb.hrx b/spec/core_functions/color/to_space/hsl/rgb.hrx new file mode 100644 index 000000000..08fc696e4 --- /dev/null +++ b/spec/core_functions/color/to_space/hsl/rgb.hrx @@ -0,0 +1,129 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(0deg 0% 0%), rgb)} + +<===> black/output.css +a { + b: black; +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(0deg 0% 100%), rgb)} + +<===> white/output.css +a { + b: white; +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(0deg 0% 50%), rgb)} + +<===> gray/output.css +a { + b: rgb(127.5, 127.5, 127.5); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(80deg 30% 60%), rgb)} + +<===> middle/output.css +a { + b: rgb(163.2, 183.6, 122.4); +} + +<===> +================================================================================ +<===> float/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(20.123456789deg 30.987654321% 60.192837465%), rgb)} + +<===> float/output.css +a { + b: rgb(184.9467656352, 143.1361700697, 122.0367054363); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(20deg 200% -50%), rgb)} + +<===> out_of_range/near/output.css +a { + b: hsl(20, 200%, -50%); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(20deg 999999% 50%), rgb)} + +<===> out_of_range/far/output.css +a { + b: hsl(20, 999999%, 50%); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(10deg 20% 30% / 0.4), rgb)} + +<===> alpha/partial/output.css +a { + b: rgba(91.8, 66.3, 61.2, 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(10deg 20% 30% / 0.0), rgb)} + +<===> alpha/transparent/output.css +a { + b: rgba(91.8, 66.3, 61.2, 0); +} + +<===> +================================================================================ +<===> missing/hue/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(none 20% 30%), rgb)} + +<===> missing/hue/output.css +a { + b: rgb(91.8, 61.2, 61.2); +} + +<===> +================================================================================ +<===> missing/saturation/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(10deg none 30%), rgb)} + +<===> missing/saturation/output.css +a { + b: rgb(76.5, 76.5, 76.5); +} + +<===> +================================================================================ +<===> missing/lightness/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(10deg 20% none), rgb)} + +<===> missing/lightness/output.css +a { + b: black; +} diff --git a/spec/core_functions/color/to_space/hsl/srgb.hrx b/spec/core_functions/color/to_space/hsl/srgb.hrx new file mode 100644 index 000000000..c8fdd63fd --- /dev/null +++ b/spec/core_functions/color/to_space/hsl/srgb.hrx @@ -0,0 +1,129 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(0deg 0% 0%), srgb)} + +<===> black/output.css +a { + b: color(srgb 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(0deg 0% 100%), srgb)} + +<===> white/output.css +a { + b: color(srgb 1 1 1); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(0deg 0% 50%), srgb)} + +<===> gray/output.css +a { + b: color(srgb 0.5 0.5 0.5); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(80deg 30% 60%), srgb)} + +<===> middle/output.css +a { + b: color(srgb 0.64 0.72 0.48); +} + +<===> +================================================================================ +<===> float/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(20.123456789deg 30.987654321% 60.192837465%), srgb)} + +<===> float/output.css +a { + b: color(srgb 0.7252814339 0.561318314 0.4785753154); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(20deg 200% -50%), srgb)} + +<===> out_of_range/near/output.css +a { + b: color(srgb -1.5 -0.1666666667 0.5); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(20deg 999999% 50%), srgb)} + +<===> out_of_range/far/output.css +a { + b: color(srgb 5000.495 -1666.165 -4999.495); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(10deg 20% 30% / 0.4), srgb)} + +<===> alpha/partial/output.css +a { + b: color(srgb 0.36 0.26 0.24 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(10deg 20% 30% / 0.0), srgb)} + +<===> alpha/transparent/output.css +a { + b: color(srgb 0.36 0.26 0.24 / 0); +} + +<===> +================================================================================ +<===> missing/hue/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(none 20% 30%), srgb)} + +<===> missing/hue/output.css +a { + b: color(srgb 0.36 0.24 0.24); +} + +<===> +================================================================================ +<===> missing/saturation/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(10deg none 30%), srgb)} + +<===> missing/saturation/output.css +a { + b: color(srgb 0.3 0.3 0.3); +} + +<===> +================================================================================ +<===> missing/lightness/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(10deg 20% none), srgb)} + +<===> missing/lightness/output.css +a { + b: color(srgb 0 0 0); +} diff --git a/spec/core_functions/color/to_space/hsl/srgb_linear.hrx b/spec/core_functions/color/to_space/hsl/srgb_linear.hrx new file mode 100644 index 000000000..eba0eeac3 --- /dev/null +++ b/spec/core_functions/color/to_space/hsl/srgb_linear.hrx @@ -0,0 +1,129 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(0deg 0% 0%), srgb-linear)} + +<===> black/output.css +a { + b: color(srgb-linear 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(0deg 0% 100%), srgb-linear)} + +<===> white/output.css +a { + b: color(srgb-linear 1 1 1); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(0deg 0% 50%), srgb-linear)} + +<===> gray/output.css +a { + b: color(srgb-linear 0.2140411405 0.2140411405 0.2140411405); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(80deg 30% 60%), srgb-linear)} + +<===> middle/output.css +a { + b: color(srgb-linear 0.3672464682 0.4769997846 0.1959941793); +} + +<===> +================================================================================ +<===> float/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(20.123456789deg 30.987654321% 60.192837465%), srgb-linear)} + +<===> float/output.css +a { + b: color(srgb-linear 0.4848385603 0.2752493311 0.1947438934); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(20deg 200% -50%), srgb-linear)} + +<===> out_of_range/near/output.css +a { + b: color(srgb-linear -2.5371552394 -0.0236523902 0.2140411405); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(20deg 999999% 50%), srgb-linear)} + +<===> out_of_range/far/output.css +a { + b: color(srgb-linear 663493625.4651376 -47462621.32578329 -663175228.1293004); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(10deg 20% 30% / 0.4), srgb-linear)} + +<===> alpha/partial/output.css +a { + b: color(srgb-linear 0.106539224 0.0549717327 0.0469642007 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(10deg 20% 30% / 0.0), srgb-linear)} + +<===> alpha/transparent/output.css +a { + b: color(srgb-linear 0.106539224 0.0549717327 0.0469642007 / 0); +} + +<===> +================================================================================ +<===> missing/hue/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(none 20% 30%), srgb-linear)} + +<===> missing/hue/output.css +a { + b: color(srgb-linear 0.106539224 0.0469642007 0.0469642007); +} + +<===> +================================================================================ +<===> missing/saturation/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(10deg none 30%), srgb-linear)} + +<===> missing/saturation/output.css +a { + b: color(srgb-linear 0.0732389559 0.0732389559 0.0732389559); +} + +<===> +================================================================================ +<===> missing/lightness/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(10deg 20% none), srgb-linear)} + +<===> missing/lightness/output.css +a { + b: color(srgb-linear 0 0 0); +} diff --git a/spec/core_functions/color/to_space/hsl/xyz.hrx b/spec/core_functions/color/to_space/hsl/xyz.hrx new file mode 100644 index 000000000..a745994d1 --- /dev/null +++ b/spec/core_functions/color/to_space/hsl/xyz.hrx @@ -0,0 +1,129 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(0deg 0% 0%), xyz)} + +<===> black/output.css +a { + b: color(xyz 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(0deg 0% 100%), xyz)} + +<===> white/output.css +a { + b: color(xyz 0.9504559271 1 1.0890577508); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(0deg 0% 50%), xyz)} + +<===> gray/output.css +a { + b: color(xyz 0.2034366706 0.2140411405 0.233103163); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(80deg 30% 60%), xyz)} + +<===> middle/output.css +a { + b: color(xyz 0.3573899014 0.4333755032 0.2502538283); +} + +<===> +================================================================================ +<===> float/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(20.123456789deg 30.987654321% 60.192837465%), xyz)} + +<===> float/output.css +a { + b: color(xyz 0.333515343 0.3140043025 0.2272909419); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(20deg 200% -50%), xyz)} + +<===> out_of_range/near/output.css +a { + b: color(xyz -1.0161268876 -0.540961491 0.1515884565); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(20deg 999999% 50%), xyz)} + +<===> out_of_range/far/output.css +a { + b: color(xyz 136956388.39988744 59264689.52803937 -623200798.6169885); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(10deg 20% 30% / 0.4), xyz)} + +<===> alpha/partial/output.css +a { + b: color(xyz 0.0720689624 0.0653589105 0.0532528168 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(10deg 20% 30% / 0.0), xyz)} + +<===> alpha/transparent/output.css +a { + b: color(xyz 0.0720689624 0.0653589105 0.0532528168 / 0); +} + +<===> +================================================================================ +<===> missing/hue/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(none 20% 30%), xyz)} + +<===> missing/hue/output.css +a { + b: color(xyz 0.0692055944 0.0596321744 0.0522983607); +} + +<===> +================================================================================ +<===> missing/saturation/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(10deg none 30%), xyz)} + +<===> missing/saturation/output.css +a { + b: color(xyz 0.0696103997 0.0732389559 0.0797614526); +} + +<===> +================================================================================ +<===> missing/lightness/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(10deg 20% none), xyz)} + +<===> missing/lightness/output.css +a { + b: color(xyz 0 0 0); +} diff --git a/spec/core_functions/color/to_space/hsl/xyz_d50.hrx b/spec/core_functions/color/to_space/hsl/xyz_d50.hrx new file mode 100644 index 000000000..43a75aaf5 --- /dev/null +++ b/spec/core_functions/color/to_space/hsl/xyz_d50.hrx @@ -0,0 +1,129 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(0deg 0% 0%), xyz-d50)} + +<===> black/output.css +a { + b: color(xyz-d50 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(0deg 0% 100%), xyz-d50)} + +<===> white/output.css +a { + b: color(xyz-d50 0.9642956764 1 0.8251046025); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(0deg 0% 50%), xyz-d50)} + +<===> gray/output.css +a { + b: color(xyz-d50 0.2063989463 0.2140411405 0.1766063301); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(80deg 30% 60%), xyz-d50)} + +<===> middle/output.css +a { + b: color(xyz-d50 0.37190333 0.4355459142 0.1913805991); +} + +<===> +================================================================================ +<===> float/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(20.123456789deg 30.987654321% 60.192837465%), xyz-d50)} + +<===> float/output.css +a { + b: color(xyz-d50 0.3452978329 0.3170012803 0.1725389126); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(20deg 200% -50%), xyz-d50)} + +<===> out_of_range/near/output.css +a { + b: color(xyz-d50 -1.08485158 -0.5684806881 0.1152232851); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(20deg 999999% 50%), xyz-d50)} + +<===> out_of_range/far/output.css +a { + b: color(xyz-d50 176160479.28127974 73395911.69654827 -468942304.8608692); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(10deg 20% 30% / 0.4), xyz-d50)} + +<===> alpha/partial/output.css +a { + b: color(xyz-d50 0.0743501157 0.0659597326 0.0403572779 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(10deg 20% 30% / 0.0), xyz-d50)} + +<===> alpha/transparent/output.css +a { + b: color(xyz-d50 0.0743501157 0.0659597326 0.0403572779 / 0); +} + +<===> +================================================================================ +<===> missing/hue/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(none 20% 30%), xyz-d50)} + +<===> missing/hue/output.css +a { + b: color(xyz-d50 0.0712660027 0.0602192369 0.0395798961); +} + +<===> +================================================================================ +<===> missing/saturation/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(10deg none 30%), xyz-d50)} + +<===> missing/saturation/output.css +a { + b: color(xyz-d50 0.0706240085 0.0732389559 0.0604297996); +} + +<===> +================================================================================ +<===> missing/lightness/input.scss +@use 'sass:color'; +a {b: color.to-space(hsl(10deg 20% none), xyz-d50)} + +<===> missing/lightness/output.css +a { + b: color(xyz-d50 0 0 0); +} From 4f92ba1a9de5f0ebac23fe8cf6bf2d101347946d Mon Sep 17 00:00:00 2001 From: Natalie Weizenbaum Date: Fri, 29 Mar 2024 17:34:12 -0700 Subject: [PATCH 13/18] Add specs for HWB --- .../color/to_space/hwb/a98_rgb.hrx | 129 ++++++++++++++++++ .../color/to_space/hwb/display_p3.hrx | 129 ++++++++++++++++++ .../core_functions/color/to_space/hwb/hsl.hrx | 129 ++++++++++++++++++ .../core_functions/color/to_space/hwb/hwb.hrx | 52 +++++++ .../core_functions/color/to_space/hwb/lab.hrx | 129 ++++++++++++++++++ .../core_functions/color/to_space/hwb/lch.hrx | 129 ++++++++++++++++++ .../color/to_space/hwb/oklab.hrx | 129 ++++++++++++++++++ .../color/to_space/hwb/oklch.hrx | 129 ++++++++++++++++++ .../color/to_space/hwb/prophoto_rgb.hrx | 129 ++++++++++++++++++ .../color/to_space/hwb/rec2020.hrx | 129 ++++++++++++++++++ .../core_functions/color/to_space/hwb/rgb.hrx | 129 ++++++++++++++++++ .../color/to_space/hwb/srgb.hrx | 129 ++++++++++++++++++ .../color/to_space/hwb/srgb_linear.hrx | 129 ++++++++++++++++++ .../core_functions/color/to_space/hwb/xyz.hrx | 129 ++++++++++++++++++ .../color/to_space/hwb/xyz_d50.hrx | 129 ++++++++++++++++++ 15 files changed, 1858 insertions(+) create mode 100644 spec/core_functions/color/to_space/hwb/a98_rgb.hrx create mode 100644 spec/core_functions/color/to_space/hwb/display_p3.hrx create mode 100644 spec/core_functions/color/to_space/hwb/hsl.hrx create mode 100644 spec/core_functions/color/to_space/hwb/hwb.hrx create mode 100644 spec/core_functions/color/to_space/hwb/lab.hrx create mode 100644 spec/core_functions/color/to_space/hwb/lch.hrx create mode 100644 spec/core_functions/color/to_space/hwb/oklab.hrx create mode 100644 spec/core_functions/color/to_space/hwb/oklch.hrx create mode 100644 spec/core_functions/color/to_space/hwb/prophoto_rgb.hrx create mode 100644 spec/core_functions/color/to_space/hwb/rec2020.hrx create mode 100644 spec/core_functions/color/to_space/hwb/rgb.hrx create mode 100644 spec/core_functions/color/to_space/hwb/srgb.hrx create mode 100644 spec/core_functions/color/to_space/hwb/srgb_linear.hrx create mode 100644 spec/core_functions/color/to_space/hwb/xyz.hrx create mode 100644 spec/core_functions/color/to_space/hwb/xyz_d50.hrx diff --git a/spec/core_functions/color/to_space/hwb/a98_rgb.hrx b/spec/core_functions/color/to_space/hwb/a98_rgb.hrx new file mode 100644 index 000000000..92c8a3f06 --- /dev/null +++ b/spec/core_functions/color/to_space/hwb/a98_rgb.hrx @@ -0,0 +1,129 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(0deg 0% 100%), a98-rgb)} + +<===> black/output.css +a { + b: color(a98-rgb 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(0deg 100% 0%), a98-rgb)} + +<===> white/output.css +a { + b: color(a98-rgb 1 1 1); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(0deg 50% 50%), a98-rgb)} + +<===> gray/output.css +a { + b: color(a98-rgb 0.4961036984 0.4961036984 0.4961036984); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(80deg 20% 40%), a98-rgb)} + +<===> middle/output.css +a { + b: color(a98-rgb 0.505098443 0.5944145344 0.24376153); +} + +<===> +================================================================================ +<===> float/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(20.123456789deg 30.987654321% 40.192837465%), a98-rgb)} + +<===> float/output.css +a { + b: color(a98-rgb 0.5470366266 0.4056690546 0.3183176738); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(20deg 200% -125%), a98-rgb)} + +<===> out_of_range/near/output.css +a { + b: color(a98-rgb 2.295663911 2.1618962385 2.073992407); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(20deg 999999% -999950%), a98-rgb)} + +<===> out_of_range/far/output.css +a { + b: color(a98-rgb 21869.1993352833 21868.6190794601 21868.2300804636); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(10deg 20% 30% / 0.4), a98-rgb)} + +<===> alpha/partial/output.css +a { + b: color(a98-rgb 0.6114401635 0.2890681375 0.2161347988 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(10deg 20% 30% / 0.0), a98-rgb)} + +<===> alpha/transparent/output.css +a { + b: color(a98-rgb 0.6114401635 0.2890681375 0.2161347988 / 0); +} + +<===> +================================================================================ +<===> missing/hue/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(none 20% 30%), a98-rgb)} + +<===> missing/hue/output.css +a { + b: color(a98-rgb 0.6038713799 0.2123166098 0.2123166098); +} + +<===> +================================================================================ +<===> missing/whiteness/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(10deg none 30%), a98-rgb)} + +<===> missing/whiteness/output.css +a { + b: color(a98-rgb 0.5990338556 0.1378605656 0.0323177975); +} + +<===> +================================================================================ +<===> missing/blackness/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(10deg 20% none), a98-rgb)} + +<===> missing/blackness/output.css +a { + b: color(a98-rgb 0.8725825543 0.3359890414 0.2191164159); +} diff --git a/spec/core_functions/color/to_space/hwb/display_p3.hrx b/spec/core_functions/color/to_space/hwb/display_p3.hrx new file mode 100644 index 000000000..00f265a14 --- /dev/null +++ b/spec/core_functions/color/to_space/hwb/display_p3.hrx @@ -0,0 +1,129 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(0deg 0% 100%), display-p3)} + +<===> black/output.css +a { + b: color(display-p3 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(0deg 100% 0%), display-p3)} + +<===> white/output.css +a { + b: color(display-p3 1 1 1); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(0deg 50% 50%), display-p3)} + +<===> gray/output.css +a { + b: color(display-p3 0.5 0.5 0.5); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(80deg 20% 40%), display-p3)} + +<===> middle/output.css +a { + b: color(display-p3 0.4937237179 0.5961714385 0.263280729); +} + +<===> +================================================================================ +<===> float/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(20.123456789deg 30.987654321% 40.192837465%), display-p3)} + +<===> float/output.css +a { + b: color(display-p3 0.5699167279 0.4147338146 0.3256408713); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(20deg 200% -125%), display-p3)} + +<===> out_of_range/near/output.css +a { + b: color(display-p3 2.221649714 2.0891595287 2.0108056307); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(20deg 999999% -999950%), display-p3)} + +<===> out_of_range/far/output.css +a { + b: color(display-p3 10000.4396382509 10000.1712862873 10000.0110201331); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(10deg 20% 30% / 0.4), display-p3)} + +<===> alpha/partial/output.css +a { + b: color(display-p3 0.6499865104 0.3093627099 0.2280296402 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(10deg 20% 30% / 0.0), display-p3)} + +<===> alpha/transparent/output.css +a { + b: color(display-p3 0.6499865104 0.3093627099 0.2280296402 / 0); +} + +<===> +================================================================================ +<===> missing/hue/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(none 20% 30%), display-p3)} + +<===> missing/hue/output.css +a { + b: color(display-p3 0.6455550546 0.2397703326 0.2214676273); +} + +<===> +================================================================================ +<===> missing/whiteness/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(10deg none 30%), display-p3)} + +<===> missing/whiteness/output.css +a { + b: color(display-p3 0.6427370384 0.1801457354 0.0902798862); +} + +<===> +================================================================================ +<===> missing/blackness/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(10deg 20% none), display-p3)} + +<===> missing/blackness/output.css +a { + b: color(display-p3 0.9253883052 0.3826332802 0.2571893552); +} diff --git a/spec/core_functions/color/to_space/hwb/hsl.hrx b/spec/core_functions/color/to_space/hwb/hsl.hrx new file mode 100644 index 000000000..7b449c7ca --- /dev/null +++ b/spec/core_functions/color/to_space/hwb/hsl.hrx @@ -0,0 +1,129 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(0deg 0% 100%), hsl)} + +<===> black/output.css +a { + b: hsl(0, 0%, 0%); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(0deg 100% 0%), hsl)} + +<===> white/output.css +a { + b: hsl(0, 0%, 100%); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(0deg 50% 50%), hsl)} + +<===> gray/output.css +a { + b: hsl(0, 0%, 50%); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(80deg 20% 40%), hsl)} + +<===> middle/output.css +a { + b: hsl(80, 50%, 40%); +} + +<===> +================================================================================ +<===> float/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(20.123456789deg 30.987654321% 40.192837465%), hsl)} + +<===> float/output.css +a { + b: hsl(20.123456789, 31.7413583858%, 45.397408428%); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(20deg 200% -125%), hsl)} + +<===> out_of_range/near/output.css +a { + b: hsl(200, 11.1111111111%, 212.5%); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(20deg 999999% -999950%), hsl)} + +<===> out_of_range/far/output.css +a { + b: hsl(200, 0.0025501925%, 1000024.4999999999%); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(10deg 20% 30% / 0.4), hsl)} + +<===> alpha/partial/output.css +a { + b: hsla(10, 55.5555555556%, 45%, 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(10deg 20% 30% / 0.0), hsl)} + +<===> alpha/transparent/output.css +a { + b: hsla(10, 55.5555555556%, 45%, 0); +} + +<===> +================================================================================ +<===> missing/hue/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(none 20% 30%), hsl)} + +<===> missing/hue/output.css +a { + b: hsl(0, 55.5555555556%, 45%); +} + +<===> +================================================================================ +<===> missing/whiteness/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(10deg none 30%), hsl)} + +<===> missing/whiteness/output.css +a { + b: hsl(10, 100%, 35%); +} + +<===> +================================================================================ +<===> missing/blackness/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(10deg 20% none), hsl)} + +<===> missing/blackness/output.css +a { + b: hsl(10, 100%, 60%); +} diff --git a/spec/core_functions/color/to_space/hwb/hwb.hrx b/spec/core_functions/color/to_space/hwb/hwb.hrx new file mode 100644 index 000000000..85748076d --- /dev/null +++ b/spec/core_functions/color/to_space/hwb/hwb.hrx @@ -0,0 +1,52 @@ +<===> in_range/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(0deg 20% 30%), hwb)} + +<===> in_range/output.css +a { + b: hsl(0, 55.5555555556%, 45%); +} + +<===> +================================================================================ +<===> out_of_range/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(20deg 200% -125%), hwb)} + +<===> out_of_range/output.css +a { + b: hsl(200, 11.1111111111%, 212.5%); +} + +<===> +================================================================================ +<===> missing/hue/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(none 20% 30%), hsl)} + +<===> missing/hue/output.css +a { + b: hsl(0, 55.5555555556%, 45%); +} + +<===> +================================================================================ +<===> missing/whiteness/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(10deg none 30%), hsl)} + +<===> missing/whiteness/output.css +a { + b: hsl(10, 100%, 35%); +} + +<===> +================================================================================ +<===> missing/blackness/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(10deg 20% none), hsl)} + +<===> missing/blackness/output.css +a { + b: hsl(10, 100%, 60%); +} diff --git a/spec/core_functions/color/to_space/hwb/lab.hrx b/spec/core_functions/color/to_space/hwb/lab.hrx new file mode 100644 index 000000000..de54cec42 --- /dev/null +++ b/spec/core_functions/color/to_space/hwb/lab.hrx @@ -0,0 +1,129 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(0deg 0% 100%), lab)} + +<===> black/output.css +a { + b: lab(0% 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(0deg 100% 0%), lab)} + +<===> white/output.css +a { + b: lab(100% 0 0); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(0deg 50% 50%), lab)} + +<===> gray/output.css +a { + b: lab(53.3889647411% 0 0); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(80deg 20% 40%), lab)} + +<===> middle/output.css +a { + b: lab(59.1049141497% -23.929516442 47.3632808755); +} + +<===> +================================================================================ +<===> float/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(20.123456789deg 30.987654321% 40.192837465%), lab)} + +<===> float/output.css +a { + b: lab(48.7209664558% 18.0179342003 22.2207931535); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(20deg 200% -125%), lab)} + +<===> out_of_range/near/output.css +a { + b: lab(190.7145135415% 10.5586740456 13.5288110625); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(20deg 999999% -999950%), lab)} + +<===> out_of_range/far/output.css +a { + b: lab(176127.1511703222% 3.8377999266 5.0226200661); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(10deg 20% 30% / 0.4), lab)} + +<===> alpha/partial/output.css +a { + b: lab(45.4228859316% 43.1656753022 35.3539928676 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(10deg 20% 30% / 0.0), lab)} + +<===> alpha/transparent/output.css +a { + b: lab(45.4228859316% 43.1656753022 35.3539928676 / 0); +} + +<===> +================================================================================ +<===> missing/hue/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(none 20% 30%), lab)} + +<===> missing/hue/output.css +a { + b: lab(42.0638915398% 51.8940588399 31.6507145358); +} + +<===> +================================================================================ +<===> missing/whiteness/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(10deg none 30%), lab)} + +<===> missing/whiteness/output.css +a { + b: lab(39.3870160342% 57.3703400949 53.7905111747); +} + +<===> +================================================================================ +<===> missing/blackness/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(10deg 20% none), lab)} + +<===> missing/blackness/output.css +a { + b: lab(60.7483623827% 64.2863186591 55.7098309346); +} diff --git a/spec/core_functions/color/to_space/hwb/lch.hrx b/spec/core_functions/color/to_space/hwb/lch.hrx new file mode 100644 index 000000000..80081d315 --- /dev/null +++ b/spec/core_functions/color/to_space/hwb/lch.hrx @@ -0,0 +1,129 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(0deg 0% 100%), lch)} + +<===> black/output.css +a { + b: lch(0% 0 none); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(0deg 100% 0%), lch)} + +<===> white/output.css +a { + b: lch(100% 0 none); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(0deg 50% 50%), lch)} + +<===> gray/output.css +a { + b: lch(53.3889647411% 0 none); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(80deg 20% 40%), lch)} + +<===> middle/output.css +a { + b: lch(59.1049141497% 53.0650745071 116.8044348895deg); +} + +<===> +================================================================================ +<===> float/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(20.123456789deg 30.987654321% 40.192837465%), lch)} + +<===> float/output.css +a { + b: lch(48.7209664558% 28.6078590813 50.9628149158deg); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(20deg 200% -125%), lch)} + +<===> out_of_range/near/output.css +a { + b: lch(190.7145135415% 17.1614197072 52.029443744deg); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(20deg 999999% -999950%), lch)} + +<===> out_of_range/far/output.css +a { + b: lch(176127.1511703222% 6.3210300272 52.6164400119deg); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(10deg 20% 30% / 0.4), lch)} + +<===> alpha/partial/output.css +a { + b: lch(45.4228859316% 55.7958809947 39.3185127962deg / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(10deg 20% 30% / 0.0), lch)} + +<===> alpha/transparent/output.css +a { + b: lch(45.4228859316% 55.7958809947 39.3185127962deg / 0); +} + +<===> +================================================================================ +<===> missing/hue/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(none 20% 30%), lch)} + +<===> missing/hue/output.css +a { + b: lch(42.0638915398% 60.7845463379 none); +} + +<===> +================================================================================ +<===> missing/whiteness/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(10deg none 30%), lch)} + +<===> missing/whiteness/output.css +a { + b: lch(39.3870160342% 78.6433405639 43.1554816825deg); +} + +<===> +================================================================================ +<===> missing/blackness/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(10deg 20% none), lch)} + +<===> missing/blackness/output.css +a { + b: lch(60.7483623827% 85.0665388358 40.9118491907deg); +} diff --git a/spec/core_functions/color/to_space/hwb/oklab.hrx b/spec/core_functions/color/to_space/hwb/oklab.hrx new file mode 100644 index 000000000..45e5173ae --- /dev/null +++ b/spec/core_functions/color/to_space/hwb/oklab.hrx @@ -0,0 +1,129 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(0deg 0% 100%), oklab)} + +<===> black/output.css +a { + b: oklab(0% 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(0deg 100% 0%), oklab)} + +<===> white/output.css +a { + b: oklab(99.9999993474% 0.0000000001 0.0000000373); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(0deg 50% 50%), oklab)} + +<===> gray/output.css +a { + b: oklab(59.8180726623% 0 0.0000000223); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(80deg 20% 40%), oklab)} + +<===> middle/output.css +a { + b: oklab(63.6472338735% -0.0788719974 0.109198804); +} + +<===> +================================================================================ +<===> float/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(20.123456789deg 30.987654321% 40.192837465%), oklab)} + +<===> float/output.css +a { + b: oklab(56.1528329965% 0.0492061827 0.0538160955); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(20deg 200% -125%), oklab)} + +<===> out_of_range/near/output.css +a { + b: oklab(178.3874934308% 0.030918886 0.0348813541); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(20deg 999999% -999950%), oklab)} + +<===> out_of_range/far/output.css +a { + b: oklab(151847.6076958909% 0.0114875398 0.0131560475); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(10deg 20% 30% / 0.4), oklab)} + +<===> alpha/partial/output.css +a { + b: oklab(54.0481985043% 0.1200265651 0.0782231914 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(10deg 20% 30% / 0.0), oklab)} + +<===> alpha/transparent/output.css +a { + b: oklab(54.0481985043% 0.1200265651 0.0782231914 / 0); +} + +<===> +================================================================================ +<===> missing/hue/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(none 20% 30%), oklab)} + +<===> missing/hue/output.css +a { + b: oklab(51.4791394597% 0.1488491412 0.0695742279); +} + +<===> +================================================================================ +<===> missing/whiteness/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(10deg none 30%), oklab)} + +<===> missing/whiteness/output.css +a { + b: oklab(49.2675905721% 0.1574612806 0.0989515664); +} + +<===> +================================================================================ +<===> missing/blackness/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(10deg 20% none), oklab)} + +<===> missing/blackness/output.css +a { + b: oklab(67.8199997859% 0.1771510758 0.1158916741); +} diff --git a/spec/core_functions/color/to_space/hwb/oklch.hrx b/spec/core_functions/color/to_space/hwb/oklch.hrx new file mode 100644 index 000000000..c7ede1724 --- /dev/null +++ b/spec/core_functions/color/to_space/hwb/oklch.hrx @@ -0,0 +1,129 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(0deg 0% 100%), oklch)} + +<===> black/output.css +a { + b: oklch(0% 0 none); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(0deg 100% 0%), oklch)} + +<===> white/output.css +a { + b: oklch(99.9999993474% 0.0000000373 89.8755630959deg); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(0deg 50% 50%), oklch)} + +<===> gray/output.css +a { + b: oklch(59.8180726623% 0.0000000223 89.8755628286deg); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(80deg 20% 40%), oklch)} + +<===> middle/output.css +a { + b: oklch(63.6472338735% 0.1347040117 125.8397889312deg); +} + +<===> +================================================================================ +<===> float/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(20.123456789deg 30.987654321% 40.192837465%), oklch)} + +<===> float/output.css +a { + b: oklch(56.1528329965% 0.0729206456 47.5620912167deg); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(20deg 200% -125%), oklch)} + +<===> out_of_range/near/output.css +a { + b: oklch(178.3874934308% 0.0466120839 48.4461706648deg); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(20deg 999999% -999950%), oklch)} + +<===> out_of_range/far/output.css +a { + b: oklch(151847.6076958909% 0.017465542 48.873331133deg); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(10deg 20% 30% / 0.4), oklch)} + +<===> alpha/partial/output.css +a { + b: oklch(54.0481985043% 0.1432663394 33.0929168902deg / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(10deg 20% 30% / 0.0), oklch)} + +<===> alpha/transparent/output.css +a { + b: oklch(54.0481985043% 0.1432663394 33.0929168902deg / 0); +} + +<===> +================================================================================ +<===> missing/hue/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(none 20% 30%), oklch)} + +<===> missing/hue/output.css +a { + b: oklch(51.4791394597% 0.1643065429 none); +} + +<===> +================================================================================ +<===> missing/whiteness/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(10deg none 30%), oklch)} + +<===> missing/whiteness/output.css +a { + b: oklch(49.2675905721% 0.1859716843 32.1460100423deg); +} + +<===> +================================================================================ +<===> missing/blackness/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(10deg 20% none), oklch)} + +<===> missing/blackness/output.css +a { + b: oklch(67.8199997859% 0.2116917187 33.1925848215deg); +} diff --git a/spec/core_functions/color/to_space/hwb/prophoto_rgb.hrx b/spec/core_functions/color/to_space/hwb/prophoto_rgb.hrx new file mode 100644 index 000000000..b7a59a913 --- /dev/null +++ b/spec/core_functions/color/to_space/hwb/prophoto_rgb.hrx @@ -0,0 +1,129 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(0deg 0% 100%), prophoto-rgb)} + +<===> black/output.css +a { + b: color(prophoto-rgb 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(0deg 100% 0%), prophoto-rgb)} + +<===> white/output.css +a { + b: color(prophoto-rgb 1 1 1); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(0deg 50% 50%), prophoto-rgb)} + +<===> gray/output.css +a { + b: color(prophoto-rgb 0.4246723949 0.4246723949 0.4246723949); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(80deg 20% 40%), prophoto-rgb)} + +<===> middle/output.css +a { + b: color(prophoto-rgb 0.4173696362 0.5097373596 0.226865426); +} + +<===> +================================================================================ +<===> float/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(20.123456789deg 30.987654321% 40.192837465%), prophoto-rgb)} + +<===> float/output.css +a { + b: color(prophoto-rgb 0.4353235123 0.3529407495 0.2611635846); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(20deg 200% -125%), prophoto-rgb)} + +<===> out_of_range/near/output.css +a { + b: color(prophoto-rgb 2.6931467502 2.5889839276 2.4557122588); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(20deg 999999% -999950%), prophoto-rgb)} + +<===> out_of_range/far/output.css +a { + b: color(prophoto-rgb 200609.520572436 200606.1129393156 200601.5646967502); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(10deg 20% 30% / 0.4), prophoto-rgb)} + +<===> alpha/partial/output.css +a { + b: color(prophoto-rgb 0.4764700867 0.2813317076 0.1760974536 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(10deg 20% 30% / 0.0), prophoto-rgb)} + +<===> alpha/transparent/output.css +a { + b: color(prophoto-rgb 0.4764700867 0.2813317076 0.1760974536 / 0); +} + +<===> +================================================================================ +<===> missing/hue/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(none 20% 30%), prophoto-rgb)} + +<===> missing/hue/output.css +a { + b: color(prophoto-rgb 0.4657013132 0.2352440242 0.1674964522); +} + +<===> +================================================================================ +<===> missing/whiteness/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(10deg none 30%), prophoto-rgb)} + +<===> missing/whiteness/output.css +a { + b: color(prophoto-rgb 0.4539567276 0.2001286929 0.0733250158); +} + +<===> +================================================================================ +<===> missing/blackness/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(10deg 20% none), prophoto-rgb)} + +<===> missing/blackness/output.css +a { + b: color(prophoto-rgb 0.7274254108 0.3840965619 0.2020562891); +} diff --git a/spec/core_functions/color/to_space/hwb/rec2020.hrx b/spec/core_functions/color/to_space/hwb/rec2020.hrx new file mode 100644 index 000000000..e1843dc52 --- /dev/null +++ b/spec/core_functions/color/to_space/hwb/rec2020.hrx @@ -0,0 +1,129 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(0deg 0% 100%), rec2020)} + +<===> black/output.css +a { + b: color(rec2020 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(0deg 100% 0%), rec2020)} + +<===> white/output.css +a { + b: color(rec2020 1 1 1); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(0deg 50% 50%), rec2020)} + +<===> gray/output.css +a { + b: color(rec2020 0.4500400319 0.4500400319 0.4500400319); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(80deg 20% 40%), rec2020)} + +<===> middle/output.css +a { + b: color(rec2020 0.459214681 0.5459336036 0.2122890002); +} + +<===> +================================================================================ +<===> float/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(20.123456789deg 30.987654321% 40.192837465%), rec2020)} + +<===> float/output.css +a { + b: color(rec2020 0.4867284206 0.3676626536 0.2677057789); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(20deg 200% -125%), rec2020)} + +<===> out_of_range/near/output.css +a { + b: color(rec2020 2.3816237298 2.2717034049 2.1734869236); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(20deg 999999% -999950%), rec2020)} + +<===> out_of_range/far/output.css +a { + b: color(rec2020 21678.0429642711 21677.6112716515 21677.2173996703); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(10deg 20% 30% / 0.4), rec2020)} + +<===> alpha/partial/output.css +a { + b: color(rec2020 0.5439867892 0.2751629629 0.1667560186 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(10deg 20% 30% / 0.0), rec2020)} + +<===> alpha/transparent/output.css +a { + b: color(rec2020 0.5439867892 0.2751629629 0.1667560186 / 0); +} + +<===> +================================================================================ +<===> missing/hue/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(none 20% 30%), rec2020)} + +<===> missing/hue/output.css +a { + b: color(rec2020 0.5338070059 0.2147334666 0.158678854); +} + +<===> +================================================================================ +<===> missing/whiteness/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(10deg none 30%), rec2020)} + +<===> missing/whiteness/output.css +a { + b: color(rec2020 0.5258638966 0.1667450692 0.0381165436); +} + +<===> +================================================================================ +<===> missing/blackness/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(10deg 20% none), rec2020)} + +<===> missing/blackness/output.css +a { + b: color(rec2020 0.8117472221 0.3730204781 0.1963814934); +} diff --git a/spec/core_functions/color/to_space/hwb/rgb.hrx b/spec/core_functions/color/to_space/hwb/rgb.hrx new file mode 100644 index 000000000..b5faeef92 --- /dev/null +++ b/spec/core_functions/color/to_space/hwb/rgb.hrx @@ -0,0 +1,129 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(0deg 0% 100%), rgb)} + +<===> black/output.css +a { + b: black; +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(0deg 100% 0%), rgb)} + +<===> white/output.css +a { + b: white; +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(0deg 50% 50%), rgb)} + +<===> gray/output.css +a { + b: rgb(127.5, 127.5, 127.5); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(80deg 20% 40%), rgb)} + +<===> middle/output.css +a { + b: #779933; +} + +<===> +================================================================================ +<===> float/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(20.123456789deg 30.987654321% 40.192837465%), rgb)} + +<===> float/output.css +a { + b: rgb(152.5082644643, 103.6663139681, 79.0185185186); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(20deg 200% -125%), rgb)} + +<===> out_of_range/near/output.css +a { + b: hsl(200, 11.1111111111%, 212.5%); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(20deg 999999% -999950%), rgb)} + +<===> out_of_range/far/output.css +a { + b: hsl(200, 0.0025501925%, 1000024.4999999999%); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(10deg 20% 30% / 0.4), rgb)} + +<===> alpha/partial/output.css +a { + b: rgba(178.5, 72.25, 51, 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(10deg 20% 30% / 0.0), rgb)} + +<===> alpha/transparent/output.css +a { + b: rgba(178.5, 72.25, 51, 0); +} + +<===> +================================================================================ +<===> missing/hue/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(none 20% 30%), rgb)} + +<===> missing/hue/output.css +a { + b: rgb(178.5, 51, 51); +} + +<===> +================================================================================ +<===> missing/whiteness/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(10deg none 30%), rgb)} + +<===> missing/whiteness/output.css +a { + b: rgb(178.5, 29.75, 0); +} + +<===> +================================================================================ +<===> missing/blackness/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(10deg 20% none), rgb)} + +<===> missing/blackness/output.css +a { + b: #ff5533; +} diff --git a/spec/core_functions/color/to_space/hwb/srgb.hrx b/spec/core_functions/color/to_space/hwb/srgb.hrx new file mode 100644 index 000000000..bb90b12a9 --- /dev/null +++ b/spec/core_functions/color/to_space/hwb/srgb.hrx @@ -0,0 +1,129 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(0deg 0% 100%), srgb)} + +<===> black/output.css +a { + b: color(srgb 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(0deg 100% 0%), srgb)} + +<===> white/output.css +a { + b: color(srgb 1 1 1); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(0deg 50% 50%), srgb)} + +<===> gray/output.css +a { + b: color(srgb 0.5 0.5 0.5); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(80deg 20% 40%), srgb)} + +<===> middle/output.css +a { + b: color(srgb 0.4666666667 0.6 0.2); +} + +<===> +================================================================================ +<===> float/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(20.123456789deg 30.987654321% 40.192837465%), srgb)} + +<===> float/output.css +a { + b: color(srgb 0.5980716254 0.4065345646 0.3098765432); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(20deg 200% -125%), srgb)} + +<===> out_of_range/near/output.css +a { + b: color(srgb 2.25 2.0833333333 2); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(20deg 999999% -999950%), srgb)} + +<===> out_of_range/far/output.css +a { + b: color(srgb 10000.5 10000.16 9999.99); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(10deg 20% 30% / 0.4), srgb)} + +<===> alpha/partial/output.css +a { + b: color(srgb 0.7 0.2833333333 0.2 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(10deg 20% 30% / 0.0), srgb)} + +<===> alpha/transparent/output.css +a { + b: color(srgb 0.7 0.2833333333 0.2 / 0); +} + +<===> +================================================================================ +<===> missing/hue/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(none 20% 30%), srgb)} + +<===> missing/hue/output.css +a { + b: color(srgb 0.7 0.2 0.2); +} + +<===> +================================================================================ +<===> missing/whiteness/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(10deg none 30%), srgb)} + +<===> missing/whiteness/output.css +a { + b: color(srgb 0.7 0.1166666667 0); +} + +<===> +================================================================================ +<===> missing/blackness/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(10deg 20% none), srgb)} + +<===> missing/blackness/output.css +a { + b: color(srgb 1 0.3333333333 0.2); +} diff --git a/spec/core_functions/color/to_space/hwb/srgb_linear.hrx b/spec/core_functions/color/to_space/hwb/srgb_linear.hrx new file mode 100644 index 000000000..7e4b5a0c8 --- /dev/null +++ b/spec/core_functions/color/to_space/hwb/srgb_linear.hrx @@ -0,0 +1,129 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(0deg 0% 100%), srgb-linear)} + +<===> black/output.css +a { + b: color(srgb-linear 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(0deg 100% 0%), srgb-linear)} + +<===> white/output.css +a { + b: color(srgb-linear 1 1 1); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(0deg 50% 50%), srgb-linear)} + +<===> gray/output.css +a { + b: color(srgb-linear 0.2140411405 0.2140411405 0.2140411405); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(80deg 20% 40%), srgb-linear)} + +<===> middle/output.css +a { + b: color(srgb-linear 0.1844749945 0.3185467781 0.0331047666); +} + +<===> +================================================================================ +<===> float/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(20.123456789deg 30.987654321% 40.192837465%), srgb-linear)} + +<===> float/output.css +a { + b: color(srgb-linear 0.316300627 0.1374941598 0.0782247825); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(20deg 200% -125%), srgb-linear)} + +<===> out_of_range/near/output.css +a { + b: color(srgb-linear 6.5253577732 5.4497310669 4.9538457516); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(20deg 999999% -999950%), srgb-linear)} + +<===> out_of_range/far/output.css +a { + b: color(srgb-linear 3501482364.2479005 3501196665.942984 3501053821.890021); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(10deg 20% 30% / 0.4), srgb-linear)} + +<===> alpha/partial/output.css +a { + b: color(srgb-linear 0.4479884124 0.0652561709 0.0331047666 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(10deg 20% 30% / 0.0), srgb-linear)} + +<===> alpha/transparent/output.css +a { + b: color(srgb-linear 0.4479884124 0.0652561709 0.0331047666 / 0); +} + +<===> +================================================================================ +<===> missing/hue/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(none 20% 30%), srgb-linear)} + +<===> missing/hue/output.css +a { + b: color(srgb-linear 0.4479884124 0.0331047666 0.0331047666); +} + +<===> +================================================================================ +<===> missing/whiteness/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(10deg none 30%), srgb-linear)} + +<===> missing/whiteness/output.css +a { + b: color(srgb-linear 0.4479884124 0.0128067943 0); +} + +<===> +================================================================================ +<===> missing/blackness/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(10deg 20% none), srgb-linear)} + +<===> missing/blackness/output.css +a { + b: color(srgb-linear 1 0.0908417112 0.0331047666); +} diff --git a/spec/core_functions/color/to_space/hwb/xyz.hrx b/spec/core_functions/color/to_space/hwb/xyz.hrx new file mode 100644 index 000000000..7938a2257 --- /dev/null +++ b/spec/core_functions/color/to_space/hwb/xyz.hrx @@ -0,0 +1,129 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(0deg 0% 100%), xyz)} + +<===> black/output.css +a { + b: color(xyz 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(0deg 100% 0%), xyz)} + +<===> white/output.css +a { + b: color(xyz 0.9504559271 1 1.0890577508); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(0deg 50% 50%), xyz)} + +<===> gray/output.css +a { + b: color(xyz 0.2034366706 0.2140411405 0.233103163); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(80deg 20% 40%), xyz)} + +<===> middle/output.css +a { + b: color(xyz 0.195957904 0.2694311676 0.0730023108); +} + +<===> +================================================================================ +<===> float/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(20.123456789deg 30.987654321% 40.192837465%), xyz)} + +<===> float/output.css +a { + b: color(xyz 0.1937232971 0.1712365957 0.0968581071); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(20deg 200% -125%), xyz)} + +<===> out_of_range/near/output.css +a { + b: color(xyz 5.5338099778 5.6426521513 5.4845096668); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(20deg 999999% -999950%), xyz)} + +<===> out_of_range/far/output.css +a { + b: color(xyz 3327825161.6640773 3501247104.3036017 3812875110.896892); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(10deg 20% 30% / 0.4), xyz)} + +<===> alpha/partial/output.css +a { + b: color(xyz 0.2140556586 0.14431889 0.0479053227 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(10deg 20% 30% / 0.0), xyz)} + +<===> alpha/transparent/output.css +a { + b: color(xyz 0.2140556586 0.14431889 0.0479053227 / 0); +} + +<===> +================================================================================ +<===> missing/hue/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(none 20% 30%), xyz)} + +<===> missing/hue/output.css +a { + b: color(xyz 0.2025588199 0.1213252126 0.0440730432); +} + +<===> +================================================================================ +<===> missing/whiteness/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(10deg none 30%), xyz)} + +<===> missing/whiteness/output.css +a { + b: color(xyz 0.1893258086 0.1044188288 0.0101864858); +} + +<===> +================================================================================ +<===> missing/blackness/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(10deg 20% none), xyz)} + +<===> missing/blackness/output.css +a { + b: color(xyz 0.4508491469 0.2799960622 0.0616258215); +} diff --git a/spec/core_functions/color/to_space/hwb/xyz_d50.hrx b/spec/core_functions/color/to_space/hwb/xyz_d50.hrx new file mode 100644 index 000000000..c1da6bfc0 --- /dev/null +++ b/spec/core_functions/color/to_space/hwb/xyz_d50.hrx @@ -0,0 +1,129 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(0deg 0% 100%), xyz-d50)} + +<===> black/output.css +a { + b: color(xyz-d50 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(0deg 100% 0%), xyz-d50)} + +<===> white/output.css +a { + b: color(xyz-d50 0.9642956764 1 0.8251046025); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(0deg 50% 50%), xyz-d50)} + +<===> gray/output.css +a { + b: color(xyz-d50 0.2063989463 0.2140411405 0.1766063301); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(80deg 20% 40%), xyz-d50)} + +<===> middle/output.css +a { + b: color(xyz-d50 0.2078685764 0.2714132806 0.0571336509); +} + +<===> +================================================================================ +<===> float/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(20.123456789deg 30.987654321% 40.192837465%), xyz-d50)} + +<===> float/output.css +a { + b: color(xyz-d50 0.2020762306 0.1736844804 0.0736125271); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(20deg 200% -125%), xyz-d50)} + +<===> out_of_range/near/output.css +a { + b: color(xyz-d50 5.6532455812 5.6589901967 4.1574637428); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(20deg 999999% -999950%), xyz-d50)} + +<===> out_of_range/far/output.css +a { + b: color(xyz-d50 3376292952.6417513 3501251572.6872187 2888755456.5582485); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(10deg 20% 30% / 0.4), xyz-d50)} + +<===> alpha/partial/output.css +a { + b: color(xyz-d50 0.2252224921 0.1484624713 0.0362130035 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(10deg 20% 30% / 0.0), xyz-d50)} + +<===> alpha/transparent/output.css +a { + b: color(xyz-d50 0.2252224921 0.1484624713 0.0362130035 / 0); +} + +<===> +================================================================================ +<===> missing/hue/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(none 20% 30%), xyz-d50)} + +<===> missing/hue/output.css +a { + b: color(xyz-d50 0.2128393302 0.1254135471 0.0330917026); +} + +<===> +================================================================================ +<===> missing/whiteness/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(10deg none 30%), xyz-d50)} + +<===> missing/whiteness/output.css +a { + b: color(xyz-d50 0.2002849578 0.1088553897 0.007481056); +} + +<===> +================================================================================ +<===> missing/blackness/input.scss +@use 'sass:color'; +a {b: color.to-space(hwb(10deg 20% none), xyz-d50)} + +<===> missing/blackness/output.css +a { + b: color(xyz-d50 0.4757901468 0.2896232248 0.0463830476); +} From 1325ed3d2b7102168c874deb9924aecd1efcc607 Mon Sep 17 00:00:00 2001 From: Natalie Weizenbaum Date: Fri, 29 Mar 2024 17:35:20 -0700 Subject: [PATCH 14/18] Don't clamp HSL lightness --- spec/core_functions/color/adjust_color/hsl.hrx | 4 ++-- spec/core_functions/color/hsl/four_args/clamped.hrx | 2 +- spec/core_functions/color/hsl/one_arg/alpha.hrx | 2 +- spec/core_functions/color/hsl/one_arg/no_alpha.hrx | 4 ++-- spec/core_functions/color/hsl/three_args/clamped.hrx | 4 ++-- spec/core_functions/color/is_in_gamut.hrx | 2 +- 6 files changed, 9 insertions(+), 9 deletions(-) diff --git a/spec/core_functions/color/adjust_color/hsl.hrx b/spec/core_functions/color/adjust_color/hsl.hrx index 5a9fb9bf5..d860a0810 100644 --- a/spec/core_functions/color/adjust_color/hsl.hrx +++ b/spec/core_functions/color/adjust_color/hsl.hrx @@ -133,7 +133,7 @@ a {b: adjust-color(red, $lightness: 100%)} <===> lightness/max/output.css a { - b: white; + b: hsl(0, 100%, 150%); } <===> @@ -173,7 +173,7 @@ a {b: adjust-color(red, $lightness: -100%)} <===> lightness/min/output.css a { - b: black; + b: hsl(0, 100%, -50%); } <===> diff --git a/spec/core_functions/color/hsl/four_args/clamped.hrx b/spec/core_functions/color/hsl/four_args/clamped.hrx index c4aa155fa..85a62b65d 100644 --- a/spec/core_functions/color/hsl/four_args/clamped.hrx +++ b/spec/core_functions/color/hsl/four_args/clamped.hrx @@ -18,7 +18,7 @@ a {b: hsl(0, 100%, 9999%, 0.5)} <===> blue/output.css a { - b: hsla(0, 100%, 100%, 0.5); + b: hsla(0, 100%, 9999%, 0.5); } <===> diff --git a/spec/core_functions/color/hsl/one_arg/alpha.hrx b/spec/core_functions/color/hsl/one_arg/alpha.hrx index 2b23c7d42..ebd8fcc6f 100644 --- a/spec/core_functions/color/hsl/one_arg/alpha.hrx +++ b/spec/core_functions/color/hsl/one_arg/alpha.hrx @@ -64,7 +64,7 @@ a {b: hsl(0 100% 9999% / 0.5)} <===> clamped/lightness/output.css a { - b: hsla(0, 100%, 100%, 0.5); + b: hsla(0, 100%, 9999%, 0.5); } <===> 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 88c65610e..a7f5257f7 100644 --- a/spec/core_functions/color/hsl/one_arg/no_alpha.hrx +++ b/spec/core_functions/color/hsl/one_arg/no_alpha.hrx @@ -53,7 +53,7 @@ a {b: hsl(0 100% 500%)} <===> clamped/lightness/above/output.css a { - b: hsl(0, 100%, 100%); + b: hsl(0, 100%, 500%); } <===> @@ -63,7 +63,7 @@ a {b: hsl(0 100% -100%)} <===> clamped/lightness/below/output.css a { - b: hsl(0, 100%, 0%); + b: hsl(0, 100%, -100%); } <===> diff --git a/spec/core_functions/color/hsl/three_args/clamped.hrx b/spec/core_functions/color/hsl/three_args/clamped.hrx index bad8c2a18..308a32fbb 100644 --- a/spec/core_functions/color/hsl/three_args/clamped.hrx +++ b/spec/core_functions/color/hsl/three_args/clamped.hrx @@ -18,7 +18,7 @@ a {b: hsl(0, 100%, 500%)} <===> lightness/above/output.css a { - b: hsl(0, 100%, 100%); + b: hsl(0, 100%, 500%); } <===> @@ -28,5 +28,5 @@ a {b: hsl(0, 100%, -100%)} <===> lightness/below/output.css a { - b: hsl(0, 100%, 0%); + b: hsl(0, 100%, -100%); } diff --git a/spec/core_functions/color/is_in_gamut.hrx b/spec/core_functions/color/is_in_gamut.hrx index 7e86e86f0..4d93914ff 100644 --- a/spec/core_functions/color/is_in_gamut.hrx +++ b/spec/core_functions/color/is_in_gamut.hrx @@ -37,7 +37,7 @@ a {b: color.is-in-gamut(hsl(0 0% -1%))} <===> hsl/output.css a { - b: true; + b: false; } <===> From 0942ad5f514dc9939cae8bc3b89616c25b0c595a Mon Sep 17 00:00:00 2001 From: Natalie Weizenbaum Date: Fri, 29 Mar 2024 18:07:05 -0700 Subject: [PATCH 15/18] Add specs for LCH --- .../color/to_space/lch/a98_rgb.hrx | 129 ++++++++++++++++++ .../color/to_space/lch/display_p3.hrx | 129 ++++++++++++++++++ .../core_functions/color/to_space/lch/hsl.hrx | 129 ++++++++++++++++++ .../core_functions/color/to_space/lch/hwb.hrx | 129 ++++++++++++++++++ .../core_functions/color/to_space/lch/lab.hrx | 129 ++++++++++++++++++ .../core_functions/color/to_space/lch/lch.hrx | 52 +++++++ .../color/to_space/lch/oklab.hrx | 129 ++++++++++++++++++ .../color/to_space/lch/oklch.hrx | 129 ++++++++++++++++++ .../color/to_space/lch/prophoto_rgb.hrx | 129 ++++++++++++++++++ .../color/to_space/lch/rec2020.hrx | 129 ++++++++++++++++++ .../core_functions/color/to_space/lch/rgb.hrx | 129 ++++++++++++++++++ .../color/to_space/lch/srgb.hrx | 129 ++++++++++++++++++ .../color/to_space/lch/srgb_linear.hrx | 129 ++++++++++++++++++ .../core_functions/color/to_space/lch/xyz.hrx | 129 ++++++++++++++++++ .../color/to_space/lch/xyz_d50.hrx | 129 ++++++++++++++++++ 15 files changed, 1858 insertions(+) create mode 100644 spec/core_functions/color/to_space/lch/a98_rgb.hrx create mode 100644 spec/core_functions/color/to_space/lch/display_p3.hrx create mode 100644 spec/core_functions/color/to_space/lch/hsl.hrx create mode 100644 spec/core_functions/color/to_space/lch/hwb.hrx create mode 100644 spec/core_functions/color/to_space/lch/lab.hrx create mode 100644 spec/core_functions/color/to_space/lch/lch.hrx create mode 100644 spec/core_functions/color/to_space/lch/oklab.hrx create mode 100644 spec/core_functions/color/to_space/lch/oklch.hrx create mode 100644 spec/core_functions/color/to_space/lch/prophoto_rgb.hrx create mode 100644 spec/core_functions/color/to_space/lch/rec2020.hrx create mode 100644 spec/core_functions/color/to_space/lch/rgb.hrx create mode 100644 spec/core_functions/color/to_space/lch/srgb.hrx create mode 100644 spec/core_functions/color/to_space/lch/srgb_linear.hrx create mode 100644 spec/core_functions/color/to_space/lch/xyz.hrx create mode 100644 spec/core_functions/color/to_space/lch/xyz_d50.hrx diff --git a/spec/core_functions/color/to_space/lch/a98_rgb.hrx b/spec/core_functions/color/to_space/lch/a98_rgb.hrx new file mode 100644 index 000000000..039ab2444 --- /dev/null +++ b/spec/core_functions/color/to_space/lch/a98_rgb.hrx @@ -0,0 +1,129 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(0% 0 0deg), a98-rgb)} + +<===> black/output.css +a { + b: color(a98-rgb 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(100% 0 0deg), a98-rgb)} + +<===> white/output.css +a { + b: color(a98-rgb 1 1 1); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(50% 0 0deg), a98-rgb)} + +<===> gray/output.css +a { + b: color(a98-rgb 0.4633483808 0.4633483808 0.4633483808); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% 20 30deg), a98-rgb)} + +<===> middle/output.css +a { + b: color(a98-rgb 0.1855277377 0.0926913904 0.0818650595); +} + +<===> +================================================================================ +<===> float/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10.123456789% 20.987654321 30.192837465deg), a98-rgb)} + +<===> float/output.css +a { + b: color(a98-rgb 0.1889263665 0.0909755641 0.0795209428); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color.change(lch(0% 200 0deg), $lightness: -10%), a98-rgb)} + +<===> out_of_range/near/output.css +a { + b: color(a98-rgb 0.4634940567 -0.3642836921 -0.1126427123); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% 999999 0deg), a98-rgb)} + +<===> out_of_range/far/output.css +a { + b: color(a98-rgb 42562.6792376747 -31021.1046455384 6233.1625417899); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% 20 30deg / 0.4), a98-rgb)} + +<===> alpha/partial/output.css +a { + b: color(a98-rgb 0.1855277377 0.0926913904 0.0818650595 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% 20 30deg / 0.0), a98-rgb)} + +<===> alpha/transparent/output.css +a { + b: color(a98-rgb 0.1855277377 0.0926913904 0.0818650595 / 0); +} + +<===> +================================================================================ +<===> missing/lightness/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(none 20 30deg), a98-rgb)} + +<===> missing/lightness/output.css +a { + b: color(a98-rgb 0.1244563961 -0.084601587 -0.1049078937); +} + +<===> +================================================================================ +<===> missing/chroma/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% none 30deg), a98-rgb)} + +<===> missing/chroma/output.css +a { + b: color(a98-rgb 0.1300242938 0.1300242938 0.1300242938); +} + +<===> +================================================================================ +<===> missing/hue/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% 20 none), a98-rgb)} + +<===> missing/hue/output.css +a { + b: color(a98-rgb 0.1862731835 0.0856347366 0.1310611506); +} diff --git a/spec/core_functions/color/to_space/lch/display_p3.hrx b/spec/core_functions/color/to_space/lch/display_p3.hrx new file mode 100644 index 000000000..feb57ac16 --- /dev/null +++ b/spec/core_functions/color/to_space/lch/display_p3.hrx @@ -0,0 +1,129 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(0% 0 0deg), display-p3)} + +<===> black/output.css +a { + b: color(display-p3 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(100% 0 0deg), display-p3)} + +<===> white/output.css +a { + b: color(display-p3 1 1 1); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(50% 0 0deg), display-p3)} + +<===> gray/output.css +a { + b: color(display-p3 0.4663266093 0.4663266093 0.4663266093); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% 20 30deg), display-p3)} + +<===> middle/output.css +a { + b: color(display-p3 0.1810277824 0.0722540734 0.0569980019); +} + +<===> +================================================================================ +<===> float/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10.123456789% 20.987654321 30.192837465deg), display-p3)} + +<===> float/output.css +a { + b: color(display-p3 0.1852138261 0.0708949536 0.054721162); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color.change(lch(0% 200 0deg), $lightness: -10%), display-p3)} + +<===> out_of_range/near/output.css +a { + b: color(display-p3 0.5150813189 -0.3405175977 -0.0725015019); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% 999999 0deg), display-p3)} + +<===> out_of_range/far/output.css +a { + b: color(display-p3 20032.6181692902 -12940.6885284751 3928.8140693077); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% 20 30deg / 0.4), display-p3)} + +<===> alpha/partial/output.css +a { + b: color(display-p3 0.1810277824 0.0722540734 0.0569980019 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% 20 30deg / 0.0), display-p3)} + +<===> alpha/transparent/output.css +a { + b: color(display-p3 0.1810277824 0.0722540734 0.0569980019 / 0); +} + +<===> +================================================================================ +<===> missing/lightness/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(none 20 30deg), display-p3)} + +<===> missing/lightness/output.css +a { + b: color(display-p3 0.1144797929 -0.0473082464 -0.0747498159); +} + +<===> +================================================================================ +<===> missing/chroma/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% none 30deg), display-p3)} + +<===> missing/chroma/output.css +a { + b: color(display-p3 0.1077034111 0.1077034111 0.1077034111); +} + +<===> +================================================================================ +<===> missing/hue/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% 20 none), display-p3)} + +<===> missing/hue/output.css +a { + b: color(display-p3 0.1823778479 0.0651398083 0.1096920557); +} diff --git a/spec/core_functions/color/to_space/lch/hsl.hrx b/spec/core_functions/color/to_space/lch/hsl.hrx new file mode 100644 index 000000000..9ae96d874 --- /dev/null +++ b/spec/core_functions/color/to_space/lch/hsl.hrx @@ -0,0 +1,129 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(0% 0 0deg), hsl)} + +<===> black/output.css +a { + b: hsl(0, 0%, 0%); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(100% 0 0deg), hsl)} + +<===> white/output.css +a { + b: hsl(0, 0%, 100%); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(50% 0 0deg), hsl)} + +<===> gray/output.css +a { + b: hsl(0, 0%, 46.6326609284%); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% 20 30deg), hsl)} + +<===> middle/output.css +a { + b: hsl(5.5048306165, 59.0012292082%, 12.4106897496%); +} + +<===> +================================================================================ +<===> float/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10.123456789% 20.987654321 30.192837465deg), hsl)} + +<===> float/output.css +a { + b: hsl(5.5490985392, 61.5887632777%, 12.5078193109%); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color.change(lch(0% 200 0deg), $lightness: -10%), hsl)} + +<===> out_of_range/near/output.css +a { + b: hsl(340.1543058221, 427.9584468502%, 11.074503568%); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% 999999 0deg), hsl)} + +<===> out_of_range/far/output.css +a { + b: hsl(149.4283545837, 420.5938588221%, 429851.5077692641%); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% 20 30deg / 0.4), hsl)} + +<===> alpha/partial/output.css +a { + b: hsla(5.5048306165, 59.0012292082%, 12.4106897496%, 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% 20 30deg / 0.0), hsl)} + +<===> alpha/transparent/output.css +a { + b: hsla(5.5048306165, 59.0012292082%, 12.4106897496%, 0); +} + +<===> +================================================================================ +<===> missing/lightness/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(none 20 30deg), hsl)} + +<===> missing/lightness/output.css +a { + b: hsl(6.9848409854, 394.5339053958%, 0%); +} + +<===> +================================================================================ +<===> missing/chroma/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% none 30deg), hsl)} + +<===> missing/chroma/output.css +a { + b: hsl(0, 0%, 10.7703411095%); +} + +<===> +================================================================================ +<===> missing/hue/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% 20 none), hsl)} + +<===> missing/hue/output.css +a { + b: hsl(0, 56.1707811732%, 12.7694440441%); +} diff --git a/spec/core_functions/color/to_space/lch/hwb.hrx b/spec/core_functions/color/to_space/lch/hwb.hrx new file mode 100644 index 000000000..55e24ac9d --- /dev/null +++ b/spec/core_functions/color/to_space/lch/hwb.hrx @@ -0,0 +1,129 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(0% 0 0deg), hwb)} + +<===> black/output.css +a { + b: black; +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(100% 0 0deg), hwb)} + +<===> white/output.css +a { + b: white; +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(50% 0 0deg), hwb)} + +<===> gray/output.css +a { + b: hsl(0, 0%, 46.6326609284%); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% 20 30deg), hwb)} + +<===> middle/output.css +a { + b: hsl(5.5048306165, 59.0012292082%, 12.4106897496%); +} + +<===> +================================================================================ +<===> float/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10.123456789% 20.987654321 30.192837465deg), hwb)} + +<===> float/output.css +a { + b: hsl(5.5490985392, 61.5887632777%, 12.5078193109%); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color.change(lch(0% 200 0deg), $lightness: -10%), hwb)} + +<===> out_of_range/near/output.css +a { + b: hsl(340.1543058221, 427.9584468502%, 11.074503568%); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% 999999 0deg), hwb)} + +<===> out_of_range/far/output.css +a { + b: hsl(149.4283545837, 420.5938588221%, 429851.5077692638%); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% 20 30deg / 0.4), hwb)} + +<===> alpha/partial/output.css +a { + b: hsla(5.5048306165, 59.0012292082%, 12.4106897496%, 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% 20 30deg / 0.0), hwb)} + +<===> alpha/transparent/output.css +a { + b: hsla(5.5048306165, 59.0012292082%, 12.4106897496%, 0); +} + +<===> +================================================================================ +<===> missing/lightness/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(none 20 30deg), hwb)} + +<===> missing/lightness/output.css +a { + b: hsl(6.9848409854, 394.5339053958%, 2.7008748146%); +} + +<===> +================================================================================ +<===> missing/chroma/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% none 30deg), hwb)} + +<===> missing/chroma/output.css +a { + b: hsl(0, 0%, 10.7703411095%); +} + +<===> +================================================================================ +<===> missing/hue/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% 20 none), hwb)} + +<===> missing/hue/output.css +a { + b: hsl(0, 56.1707811732%, 12.7694440441%); +} diff --git a/spec/core_functions/color/to_space/lch/lab.hrx b/spec/core_functions/color/to_space/lch/lab.hrx new file mode 100644 index 000000000..9cf45c496 --- /dev/null +++ b/spec/core_functions/color/to_space/lch/lab.hrx @@ -0,0 +1,129 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(0% 0 0deg), lab)} + +<===> black/output.css +a { + b: lab(0% none none); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(100% 0 0deg), lab)} + +<===> white/output.css +a { + b: lab(100% 0 0); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(50% 0 0deg), lab)} + +<===> gray/output.css +a { + b: lab(50% 0 0); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% 20 30deg), lab)} + +<===> middle/output.css +a { + b: lab(10% 17.3205080757 10); +} + +<===> +================================================================================ +<===> float/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10.123456789% 20.987654321 30.192837465deg), lab)} + +<===> float/output.css +a { + b: lab(10.123456789% 18.1404203948 10.5549411083); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color.change(lch(0% 200 0deg), $lightness: -10%), lab)} + +<===> out_of_range/near/output.css +a { + b: lab(-10% 200 0); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% 999999 0deg), lab)} + +<===> out_of_range/far/output.css +a { + b: lab(10% 999999 0); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% 20 30deg / 0.4), lab)} + +<===> alpha/partial/output.css +a { + b: lab(10% 17.3205080757 10 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% 20 30deg / 0.0), lab)} + +<===> alpha/transparent/output.css +a { + b: lab(10% 17.3205080757 10 / 0); +} + +<===> +================================================================================ +<===> missing/lightness/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(none 20 30deg), lab)} + +<===> missing/lightness/output.css +a { + b: lab(none none none); +} + +<===> +================================================================================ +<===> missing/chroma/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% none 30deg), lab)} + +<===> missing/chroma/output.css +a { + b: lab(10% 0 0); +} + +<===> +================================================================================ +<===> missing/hue/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% 20 none), lab)} + +<===> missing/hue/output.css +a { + b: lab(10% 20 0); +} diff --git a/spec/core_functions/color/to_space/lch/lch.hrx b/spec/core_functions/color/to_space/lch/lch.hrx new file mode 100644 index 000000000..a3889d6bf --- /dev/null +++ b/spec/core_functions/color/to_space/lch/lch.hrx @@ -0,0 +1,52 @@ +<===> in_range/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% 20 30deg), lch)} + +<===> in_range/output.css +a { + b: lch(10% 20 30deg); +} + +<===> +================================================================================ +<===> out_of_range/input.scss +@use 'sass:color'; +a {b: color.to-space(color.change(lch(0% 200 0deg), $lightness: -10%), lch)} + +<===> out_of_range/output.css +a { + b: lch(-10% 200 0deg); +} + +<===> +================================================================================ +<===> missing/lightness/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(none 20 30deg), lch)} + +<===> missing/lightness/output.css +a { + b: lch(none 20 30deg); +} + +<===> +================================================================================ +<===> missing/chroma/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% none 30deg), lch)} + +<===> missing/chroma/output.css +a { + b: lch(10% none 30deg); +} + +<===> +================================================================================ +<===> missing/hue/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% 20 none), lch)} + +<===> missing/hue/output.css +a { + b: lch(10% 20 none); +} diff --git a/spec/core_functions/color/to_space/lch/oklab.hrx b/spec/core_functions/color/to_space/lch/oklab.hrx new file mode 100644 index 000000000..1a1154a23 --- /dev/null +++ b/spec/core_functions/color/to_space/lch/oklab.hrx @@ -0,0 +1,129 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(0% 0 0deg), oklab)} + +<===> black/output.css +a { + b: oklab(0% 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(100% 0 0deg), oklab)} + +<===> white/output.css +a { + b: oklab(99.9999993474% 0.0000000001 0.0000000373); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(50% 0 0deg), oklab)} + +<===> gray/output.css +a { + b: oklab(56.8965513528% 0 0.0000000212); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% 20 30deg), oklab)} + +<===> middle/output.css +a { + b: oklab(22.8705495852% 0.0494077592 0.0263450873); +} + +<===> +================================================================================ +<===> float/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10.123456789% 20.987654321 30.192837465deg), oklab)} + +<===> float/output.css +a { + b: oklab(22.9987502615% 0.0516259003 0.0278217212); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color.change(lch(0% 200 0deg), $lightness: -10%), oklab)} + +<===> out_of_range/near/output.css +a { + b: oklab(-8.8195010816% 1.2461066083 -0.0104428032); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% 999999 0deg), oklab)} + +<===> out_of_range/far/output.css +a { + b: oklab(65685.0863648626% 3051.4896291695 -252.41535167); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% 20 30deg / 0.4), oklab)} + +<===> alpha/partial/output.css +a { + b: oklab(22.8705495852% 0.0494077592 0.0263450873 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% 20 30deg / 0.0), oklab)} + +<===> alpha/transparent/output.css +a { + b: oklab(22.8705495852% 0.0494077592 0.0263450873 / 0); +} + +<===> +================================================================================ +<===> missing/lightness/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(none 20 30deg), oklab)} + +<===> missing/lightness/output.css +a { + b: oklab(none 0.4083922235 0.0807817391); +} + +<===> +================================================================================ +<===> missing/chroma/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% none 30deg), oklab)} + +<===> missing/chroma/output.css +a { + b: oklab(22.4137929572% 0 0.0000000084); +} + +<===> +================================================================================ +<===> missing/hue/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% 20 none), oklab)} + +<===> missing/hue/output.css +a { + b: oklab(23.0834632697% 0.0614345595 -0.0007016084); +} diff --git a/spec/core_functions/color/to_space/lch/oklch.hrx b/spec/core_functions/color/to_space/lch/oklch.hrx new file mode 100644 index 000000000..6855b8c39 --- /dev/null +++ b/spec/core_functions/color/to_space/lch/oklch.hrx @@ -0,0 +1,129 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(0% 0 0deg), oklch)} + +<===> black/output.css +a { + b: oklch(0% 0 none); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(100% 0 0deg), oklch)} + +<===> white/output.css +a { + b: oklch(99.9999993474% 0.0000000373 89.8755630959deg); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(50% 0 0deg), oklch)} + +<===> gray/output.css +a { + b: oklch(56.8965513528% 0.0000000212 89.8755629589deg); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% 20 30deg), oklch)} + +<===> middle/output.css +a { + b: oklch(22.8705495852% 0.05599277 28.0673245733deg); +} + +<===> +================================================================================ +<===> float/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10.123456789% 20.987654321 30.192837465deg), oklch)} + +<===> float/output.css +a { + b: oklch(22.9987502615% 0.0586453899 28.320677744deg); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color.change(lch(0% 200 0deg), $lightness: -10%), oklch)} + +<===> out_of_range/near/output.css +a { + b: oklch(-8.8195010816% 1.2461503647 359.519852843deg); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% 999999 0deg), oklch)} + +<===> out_of_range/far/output.css +a { + b: oklch(65685.0863648626% 3061.9115706839 355.2713313124deg); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% 20 30deg / 0.4), oklch)} + +<===> alpha/partial/output.css +a { + b: oklch(22.8705495852% 0.05599277 28.0673245733deg / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% 20 30deg / 0.0), oklch)} + +<===> alpha/transparent/output.css +a { + b: oklch(22.8705495852% 0.05599277 28.0673245733deg / 0); +} + +<===> +================================================================================ +<===> missing/lightness/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(none 20 30deg), oklch)} + +<===> missing/lightness/output.css +a { + b: oklch(none 0.4163050536 11.1889160032deg); +} + +<===> +================================================================================ +<===> missing/chroma/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% none 30deg), oklch)} + +<===> missing/chroma/output.css +a { + b: oklch(22.4137929572% none 89.8755627743deg); +} + +<===> +================================================================================ +<===> missing/hue/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% 20 none), oklch)} + +<===> missing/hue/output.css +a { + b: oklch(23.0834632697% 0.0614385657 none); +} diff --git a/spec/core_functions/color/to_space/lch/prophoto_rgb.hrx b/spec/core_functions/color/to_space/lch/prophoto_rgb.hrx new file mode 100644 index 000000000..0d6d45579 --- /dev/null +++ b/spec/core_functions/color/to_space/lch/prophoto_rgb.hrx @@ -0,0 +1,129 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(0% 0 0deg), prophoto-rgb)} + +<===> black/output.css +a { + b: color(prophoto-rgb 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(100% 0 0deg), prophoto-rgb)} + +<===> white/output.css +a { + b: color(prophoto-rgb 1 1 1); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(50% 0 0deg), prophoto-rgb)} + +<===> gray/output.css +a { + b: color(prophoto-rgb 0.3906698633 0.3906698633 0.3906698633); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% 20 30deg), prophoto-rgb)} + +<===> middle/output.css +a { + b: color(prophoto-rgb 0.1119358598 0.0682122171 0.0505966427); +} + +<===> +================================================================================ +<===> float/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10.123456789% 20.987654321 30.192837465deg), prophoto-rgb)} + +<===> float/output.css +a { + b: color(prophoto-rgb 0.1140986722 0.0679789036 0.0492544884); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color.change(lch(0% 200 0deg), $lightness: -10%), prophoto-rgb)} + +<===> out_of_range/near/output.css +a { + b: color(prophoto-rgb 0.3120531174 -0.2195824001 -0.0819271128); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% 999999 0deg), prophoto-rgb)} + +<===> out_of_range/far/output.css +a { + b: color(prophoto-rgb 367010.4615537181 -222031.7168269293 0.0827038254); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% 20 30deg / 0.4), prophoto-rgb)} + +<===> alpha/partial/output.css +a { + b: color(prophoto-rgb 0.1119358598 0.0682122171 0.0505966427 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% 20 30deg / 0.0), prophoto-rgb)} + +<===> alpha/transparent/output.css +a { + b: color(prophoto-rgb 0.1119358598 0.0682122171 0.0505966427 / 0); +} + +<===> +================================================================================ +<===> missing/lightness/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(none 20 30deg), prophoto-rgb)} + +<===> missing/lightness/output.css +a { + b: color(prophoto-rgb 0.0585320378 -0.0354038244 -0.0605339143); +} + +<===> +================================================================================ +<===> missing/chroma/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% none 30deg), prophoto-rgb)} + +<===> missing/chroma/output.css +a { + b: color(prophoto-rgb 0.0827038254 0.0827038254 0.0827038254); +} + +<===> +================================================================================ +<===> missing/hue/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% 20 none), prophoto-rgb)} + +<===> missing/hue/output.css +a { + b: color(prophoto-rgb 0.1155645311 0.0659678734 0.0827038254); +} diff --git a/spec/core_functions/color/to_space/lch/rec2020.hrx b/spec/core_functions/color/to_space/lch/rec2020.hrx new file mode 100644 index 000000000..e729eaf98 --- /dev/null +++ b/spec/core_functions/color/to_space/lch/rec2020.hrx @@ -0,0 +1,129 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(0% 0 0deg), rec2020)} + +<===> black/output.css +a { + b: color(rec2020 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(100% 0 0deg), rec2020)} + +<===> white/output.css +a { + b: color(rec2020 1 1 1); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(50% 0 0deg), rec2020)} + +<===> gray/output.css +a { + b: color(rec2020 0.4141328903 0.4141328903 0.4141328903); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% 20 30deg), rec2020)} + +<===> middle/output.css +a { + b: color(rec2020 0.0987940535 0.0323770888 0.0206839256); +} + +<===> +================================================================================ +<===> float/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10.123456789% 20.987654321 30.192837465deg), rec2020)} + +<===> float/output.css +a { + b: color(rec2020 0.1021786723 0.0319354657 0.0196866185); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color.change(lch(0% 200 0deg), $lightness: -10%), rec2020)} + +<===> out_of_range/near/output.css +a { + b: color(rec2020 0.3729067583 -0.2515671342 -0.0365252061); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% 999999 0deg), rec2020)} + +<===> out_of_range/far/output.css +a { + b: color(rec2020 38725.5976285713 -26052.9381914356 6353.219962186); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% 20 30deg / 0.4), rec2020)} + +<===> alpha/partial/output.css +a { + b: color(rec2020 0.0987940535 0.0323770888 0.0206839256 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% 20 30deg / 0.0), rec2020)} + +<===> alpha/transparent/output.css +a { + b: color(rec2020 0.0987940535 0.0323770888 0.0206839256 / 0); +} + +<===> +================================================================================ +<===> missing/lightness/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(none 20 30deg), rec2020)} + +<===> missing/lightness/output.css +a { + b: color(rec2020 0.0374222506 -0.0134835285 -0.0293129957); +} + +<===> +================================================================================ +<===> missing/chroma/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% none 30deg), rec2020)} + +<===> missing/chroma/output.css +a { + b: color(rec2020 0.0506708967 0.0506708967 0.0506708967); +} + +<===> +================================================================================ +<===> missing/hue/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% 20 none), rec2020)} + +<===> missing/hue/output.css +a { + b: color(rec2020 0.1006265985 0.0294359094 0.0515937784); +} diff --git a/spec/core_functions/color/to_space/lch/rgb.hrx b/spec/core_functions/color/to_space/lch/rgb.hrx new file mode 100644 index 000000000..0ee32433e --- /dev/null +++ b/spec/core_functions/color/to_space/lch/rgb.hrx @@ -0,0 +1,129 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(0% 0 0deg), rgb)} + +<===> black/output.css +a { + b: black; +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(100% 0 0deg), rgb)} + +<===> white/output.css +a { + b: white; +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(50% 0 0deg), rgb)} + +<===> gray/output.css +a { + b: rgb(118.9132853673, 118.9132853673, 118.9132853673); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% 20 30deg), rgb)} + +<===> middle/output.css +a { + b: rgb(50.3195306005, 16.4012435608, 12.9749871225); +} + +<===> +================================================================================ +<===> float/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10.123456789% 20.987654321 30.192837465deg), rgb)} + +<===> float/output.css +a { + b: rgb(51.5386378704, 15.8847345936, 12.2512406149); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color.change(lch(0% 200 0deg), $lightness: -10%), rgb)} + +<===> out_of_range/near/output.css +a { + b: hsl(340.1543058221, 427.9584468502%, 11.074503568%); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% 999999 0deg), rgb)} + +<===> out_of_range/far/output.css +a { + b: hsl(149.4283545837, 420.5938588221%, 429851.5077692641%); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% 20 30deg / 0.4), rgb)} + +<===> alpha/partial/output.css +a { + b: rgba(50.3195306005, 16.4012435608, 12.9749871225, 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% 20 30deg / 0.0), rgb)} + +<===> alpha/transparent/output.css +a { + b: rgba(50.3195306005, 16.4012435608, 12.9749871225, 0); +} + +<===> +================================================================================ +<===> missing/lightness/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(none 20 30deg), rgb)} + +<===> missing/lightness/output.css +a { + b: hsl(6.9848409854, 394.5339053958%, 2.7008748146%); +} + +<===> +================================================================================ +<===> missing/chroma/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% none 30deg), rgb)} + +<===> missing/chroma/output.css +a { + b: rgb(27.4643698292, 27.4643698292, 27.4643698292); +} + +<===> +================================================================================ +<===> missing/hue/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% 20 none), rgb)} + +<===> missing/hue/output.css +a { + b: rgb(50.8524583137, 14.2717063113, 28.2183712056); +} diff --git a/spec/core_functions/color/to_space/lch/srgb.hrx b/spec/core_functions/color/to_space/lch/srgb.hrx new file mode 100644 index 000000000..383d80e36 --- /dev/null +++ b/spec/core_functions/color/to_space/lch/srgb.hrx @@ -0,0 +1,129 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(0% 0 0deg), srgb)} + +<===> black/output.css +a { + b: color(srgb 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(100% 0 0deg), srgb)} + +<===> white/output.css +a { + b: color(srgb 1 1 1); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(50% 0 0deg), srgb)} + +<===> gray/output.css +a { + b: color(srgb 0.4663266093 0.4663266093 0.4663266093); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% 20 30deg), srgb)} + +<===> middle/output.css +a { + b: color(srgb 0.1973314926 0.0643186022 0.0508823024); +} + +<===> +================================================================================ +<===> float/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10.123456789% 20.987654321 30.192837465deg), srgb)} + +<===> float/output.css +a { + b: color(srgb 0.2021123054 0.0622930768 0.0480440808); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color.change(lch(0% 200 0deg), $lightness: -10%), srgb)} + +<===> out_of_range/near/output.css +a { + b: color(srgb 0.5846877703 -0.363197699 -0.0496736133); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% 999999 0deg), srgb)} + +<===> out_of_range/far/output.css +a { + b: color(srgb 22373.5995764218 -13776.5694210365 4642.9330511282); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% 20 30deg / 0.4), srgb)} + +<===> alpha/partial/output.css +a { + b: color(srgb 0.1973314926 0.0643186022 0.0508823024 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% 20 30deg / 0.0), srgb)} + +<===> alpha/transparent/output.css +a { + b: color(srgb 0.1973314926 0.0643186022 0.0508823024 / 0); +} + +<===> +================================================================================ +<===> missing/lightness/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(none 20 30deg), srgb)} + +<===> missing/lightness/output.css +a { + b: color(srgb 0.133567417 -0.0547400755 -0.0795499207); +} + +<===> +================================================================================ +<===> missing/chroma/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% none 30deg), srgb)} + +<===> missing/chroma/output.css +a { + b: color(srgb 0.1077034111 0.1077034111 0.1077034111); +} + +<===> +================================================================================ +<===> missing/hue/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% 20 none), srgb)} + +<===> missing/hue/output.css +a { + b: color(srgb 0.1994214052 0.0559674757 0.1106602792); +} diff --git a/spec/core_functions/color/to_space/lch/srgb_linear.hrx b/spec/core_functions/color/to_space/lch/srgb_linear.hrx new file mode 100644 index 000000000..85d3385cb --- /dev/null +++ b/spec/core_functions/color/to_space/lch/srgb_linear.hrx @@ -0,0 +1,129 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(0% 0 0deg), srgb-linear)} + +<===> black/output.css +a { + b: color(srgb-linear 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(100% 0 0deg), srgb-linear)} + +<===> white/output.css +a { + b: color(srgb-linear 1 1 1); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(50% 0 0deg), srgb-linear)} + +<===> gray/output.css +a { + b: color(srgb-linear 0.1841865185 0.1841865185 0.1841865185); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% 20 30deg), srgb-linear)} + +<===> middle/output.css +a { + b: color(srgb-linear 0.0322794103 0.0053492596 0.0040157827); +} + +<===> +================================================================================ +<===> float/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10.123456789% 20.987654321 30.192837465deg), srgb-linear)} + +<===> float/output.css +a { + b: color(srgb-linear 0.033766727 0.0051339047 0.0037622653); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color.change(lch(0% 200 0deg), $lightness: -10%), srgb-linear)} + +<===> out_of_range/near/output.css +a { + b: color(srgb-linear 0.300965983 -0.1085200613 -0.0039066402); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% 999999 0deg), srgb-linear)} + +<===> out_of_range/far/output.css +a { + b: color(srgb-linear 24185926345.93111 -7553302222.606848 555275171.9499303); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% 20 30deg / 0.4), srgb-linear)} + +<===> alpha/partial/output.css +a { + b: color(srgb-linear 0.0322794103 0.0053492596 0.0040157827 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% 20 30deg / 0.0), srgb-linear)} + +<===> alpha/transparent/output.css +a { + b: color(srgb-linear 0.0322794103 0.0053492596 0.0040157827 / 0); +} + +<===> +================================================================================ +<===> missing/lightness/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(none 20 30deg), srgb-linear)} + +<===> missing/lightness/output.css +a { + b: color(srgb-linear 0.016044052 -0.0043759334 -0.0071369782); +} + +<===> +================================================================================ +<===> missing/chroma/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% none 30deg), srgb-linear)} + +<===> missing/chroma/output.css +a { + b: color(srgb-linear 0.0112601993 0.0112601993 0.0112601993); +} + +<===> +================================================================================ +<===> missing/hue/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% 20 none), srgb-linear)} + +<===> missing/hue/output.css +a { + b: color(srgb-linear 0.0329247775 0.004494318 0.0117575878); +} diff --git a/spec/core_functions/color/to_space/lch/xyz.hrx b/spec/core_functions/color/to_space/lch/xyz.hrx new file mode 100644 index 000000000..7bcb93488 --- /dev/null +++ b/spec/core_functions/color/to_space/lch/xyz.hrx @@ -0,0 +1,129 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(0% 0 0deg), xyz)} + +<===> black/output.css +a { + b: color(xyz 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(100% 0 0deg), xyz)} + +<===> white/output.css +a { + b: color(xyz 0.9504559271 1 1.0890577508); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(50% 0 0deg), xyz)} + +<===> gray/output.css +a { + b: color(xyz 0.1750611682 0.1841865185 0.2005897556); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% 20 30deg), xyz)} + +<===> middle/output.css +a { + b: color(xyz 0.0159493149 0.0109793933 0.0050787218); +} + +<===> +================================================================================ +<===> float/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10.123456789% 20.987654321 30.192837465deg), xyz)} + +<===> float/output.css +a { + b: color(xyz 0.0164399081 0.0111233378 0.0048408272); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color.change(lch(0% 200 0deg), $lightness: -10%), xyz)} + +<===> out_of_range/near/output.css +a { + b: color(xyz 0.0846054544 -0.0138950708 -0.0108304931); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% 999999 0deg), xyz)} + +<===> out_of_range/far/output.css +a { + b: color(xyz 7373327412.161998 -218927236.2695362 95026466.80033655); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% 20 30deg / 0.4), xyz)} + +<===> alpha/partial/output.css +a { + b: color(xyz 0.0159493149 0.0109793933 0.0050787218 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% 20 30deg / 0.0), xyz)} + +<===> alpha/transparent/output.css +a { + b: color(xyz 0.0159493149 0.0109793933 0.0050787218 / 0); +} + +<===> +================================================================================ +<===> missing/lightness/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(none 20 30deg), xyz)} + +<===> missing/lightness/output.css +a { + b: color(xyz 0.0037635667 -0.0002331742 -0.006995371); +} + +<===> +================================================================================ +<===> missing/chroma/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% none 30deg), xyz)} + +<===> missing/chroma/output.css +a { + b: color(xyz 0.0107023231 0.0112601993 0.0122630073); +} + +<===> +================================================================================ +<===> missing/hue/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% 20 none), xyz)} + +<===> missing/hue/output.css +a { + b: color(xyz 0.0173069918 0.0110640949 0.0123481274); +} diff --git a/spec/core_functions/color/to_space/lch/xyz_d50.hrx b/spec/core_functions/color/to_space/lch/xyz_d50.hrx new file mode 100644 index 000000000..0aa02fbb4 --- /dev/null +++ b/spec/core_functions/color/to_space/lch/xyz_d50.hrx @@ -0,0 +1,129 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(0% 0 0deg), xyz-d50)} + +<===> black/output.css +a { + b: color(xyz-d50 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(100% 0 0deg), xyz-d50)} + +<===> white/output.css +a { + b: color(xyz-d50 0.9642956764 1 0.8251046025); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(50% 0 0deg), xyz-d50)} + +<===> gray/output.css +a { + b: color(xyz-d50 0.1776102635 0.1841865185 0.1519731441); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% 20 30deg), xyz-d50)} + +<===> middle/output.css +a { + b: color(xyz-d50 0.0167107924 0.0112601993 0.003836437); +} + +<===> +================================================================================ +<===> float/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10.123456789% 20.987654321 30.192837465deg), xyz-d50)} + +<===> float/output.css +a { + b: color(xyz-d50 0.0172401432 0.0114213638 0.0036552028); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color.change(lch(0% 200 0deg), $lightness: -10%), xyz-d50)} + +<===> out_of_range/near/output.css +a { + b: color(xyz-d50 0.0888853348 -0.0110705646 -0.0091343738); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% 999999 0deg), xyz-d50)} + +<===> out_of_range/far/output.css +a { + b: color(xyz-d50 7716936176.70525 0.0112601993 0.0092908422); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% 20 30deg / 0.4), xyz-d50)} + +<===> alpha/partial/output.css +a { + b: color(xyz-d50 0.0167107924 0.0112601993 0.003836437 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% 20 30deg / 0.0), xyz-d50)} + +<===> alpha/transparent/output.css +a { + b: color(xyz-d50 0.0167107924 0.0112601993 0.003836437 / 0); +} + +<===> +================================================================================ +<===> missing/lightness/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(none 20 30deg), xyz-d50)} + +<===> missing/lightness/output.css +a { + b: color(xyz-d50 0.0042897166 0 -0.0052979368); +} + +<===> +================================================================================ +<===> missing/chroma/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% none 30deg), xyz-d50)} + +<===> missing/chroma/output.css +a { + b: color(xyz-d50 0.0108581615 0.0112601993 0.0092908422); +} + +<===> +================================================================================ +<===> missing/hue/input.scss +@use 'sass:color'; +a {b: color.to-space(lch(10% 20 none), xyz-d50)} + +<===> missing/hue/output.css +a { + b: color(xyz-d50 0.0177706181 0.0112601993 0.0092908422); +} From 1afe4a433aa649509671a4905ff0cfb1cb533c4a Mon Sep 17 00:00:00 2001 From: Natalie Weizenbaum Date: Mon, 1 Apr 2024 11:15:34 -0700 Subject: [PATCH 16/18] Add specs for OKLCH --- .../color/to_space/oklch/a98_rgb.hrx | 129 ++++++++++++++++++ .../color/to_space/oklch/display_p3.hrx | 129 ++++++++++++++++++ .../color/to_space/oklch/hsl.hrx | 129 ++++++++++++++++++ .../color/to_space/oklch/hwb.hrx | 129 ++++++++++++++++++ .../color/to_space/oklch/lab.hrx | 129 ++++++++++++++++++ .../color/to_space/oklch/lch.hrx | 129 ++++++++++++++++++ .../color/to_space/oklch/oklab.hrx | 129 ++++++++++++++++++ .../color/to_space/oklch/oklch.hrx | 52 +++++++ .../color/to_space/oklch/prophoto_rgb.hrx | 129 ++++++++++++++++++ .../color/to_space/oklch/rec2020.hrx | 129 ++++++++++++++++++ .../color/to_space/oklch/rgb.hrx | 129 ++++++++++++++++++ .../color/to_space/oklch/srgb.hrx | 129 ++++++++++++++++++ .../color/to_space/oklch/srgb_linear.hrx | 129 ++++++++++++++++++ .../color/to_space/oklch/xyz.hrx | 129 ++++++++++++++++++ .../color/to_space/oklch/xyz_d50.hrx | 129 ++++++++++++++++++ 15 files changed, 1858 insertions(+) create mode 100644 spec/core_functions/color/to_space/oklch/a98_rgb.hrx create mode 100644 spec/core_functions/color/to_space/oklch/display_p3.hrx create mode 100644 spec/core_functions/color/to_space/oklch/hsl.hrx create mode 100644 spec/core_functions/color/to_space/oklch/hwb.hrx create mode 100644 spec/core_functions/color/to_space/oklch/lab.hrx create mode 100644 spec/core_functions/color/to_space/oklch/lch.hrx create mode 100644 spec/core_functions/color/to_space/oklch/oklab.hrx create mode 100644 spec/core_functions/color/to_space/oklch/oklch.hrx create mode 100644 spec/core_functions/color/to_space/oklch/prophoto_rgb.hrx create mode 100644 spec/core_functions/color/to_space/oklch/rec2020.hrx create mode 100644 spec/core_functions/color/to_space/oklch/rgb.hrx create mode 100644 spec/core_functions/color/to_space/oklch/srgb.hrx create mode 100644 spec/core_functions/color/to_space/oklch/srgb_linear.hrx create mode 100644 spec/core_functions/color/to_space/oklch/xyz.hrx create mode 100644 spec/core_functions/color/to_space/oklch/xyz_d50.hrx diff --git a/spec/core_functions/color/to_space/oklch/a98_rgb.hrx b/spec/core_functions/color/to_space/oklch/a98_rgb.hrx new file mode 100644 index 000000000..6f3b6445f --- /dev/null +++ b/spec/core_functions/color/to_space/oklch/a98_rgb.hrx @@ -0,0 +1,129 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(0% 0 0deg), a98-rgb)} + +<===> black/output.css +a { + b: color(a98-rgb 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(100% 0 0deg), a98-rgb)} + +<===> white/output.css +a { + b: color(a98-rgb 0.9999999799 1.000000009 1.0000001143); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(50% 0 0deg), a98-rgb)} + +<===> gray/output.css +a { + b: color(a98-rgb 0.3884711027 0.388471114 0.3884711549); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% 0.1 30deg), a98-rgb)} + +<===> middle/output.css +a { + b: color(a98-rgb 0.1027766441 -0.0609172248 -0.0321025971); +} + +<===> +================================================================================ +<===> float/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10.123456789% 0.198765432 30.192837465deg), a98-rgb)} + +<===> float/output.css +a { + b: color(a98-rgb 0.1569345546 -0.1088588794 -0.038585035); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color.change(oklch(0% 1 0deg), $lightness: -10%), a98-rgb)} + +<===> out_of_range/near/output.css +a { + b: color(a98-rgb 0.3172861934 -0.2637782471 -0.1086210387); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% 999999 0deg), a98-rgb)} + +<===> out_of_range/far/output.css +a { + b: color(a98-rgb 66665577.100123584 -49015761.348732136 -12422991.362568038); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% 0.1 30deg / 0.4), a98-rgb)} + +<===> alpha/partial/output.css +a { + b: color(a98-rgb 0.1027766441 -0.0609172248 -0.0321025971 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% 0.1 30deg / 0.0), a98-rgb)} + +<===> alpha/transparent/output.css +a { + b: color(a98-rgb 0.1027766441 -0.0609172248 -0.0321025971 / 0); +} + +<===> +================================================================================ +<===> missing/lightness/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(none 0.1 30deg), a98-rgb)} + +<===> missing/lightness/output.css +a { + b: color(a98-rgb 0.0213511879 0.0047462167 -0.0347458469); +} + +<===> +================================================================================ +<===> missing/chroma/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% none 30deg), a98-rgb)} + +<===> missing/chroma/output.css +a { + b: color(a98-rgb 0.0432393553 0.0432393565 0.0432393611); +} + +<===> +================================================================================ +<===> missing/hue/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% 0.1 none), a98-rgb)} + +<===> missing/hue/output.css +a { + b: color(a98-rgb 0.0964961637 -0.0571048143 0.0359545033); +} diff --git a/spec/core_functions/color/to_space/oklch/display_p3.hrx b/spec/core_functions/color/to_space/oklch/display_p3.hrx new file mode 100644 index 000000000..0d9d28afb --- /dev/null +++ b/spec/core_functions/color/to_space/oklch/display_p3.hrx @@ -0,0 +1,129 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(0% 0 0deg), display-p3)} + +<===> black/output.css +a { + b: color(display-p3 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(100% 0 0deg), display-p3)} + +<===> white/output.css +a { + b: color(display-p3 0.9999999764 1.0000000074 1.0000001047); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(50% 0 0deg), display-p3)} + +<===> gray/output.css +a { + b: color(display-p3 0.3885728491 0.3885728621 0.3885729031); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% 0.1 30deg), display-p3)} + +<===> middle/output.css +a { + b: color(display-p3 0.0863974377 -0.022155665 -0.0050290551); +} + +<===> +================================================================================ +<===> float/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10.123456789% 0.198765432 30.192837465deg), display-p3)} + +<===> float/output.css +a { + b: color(display-p3 0.1548116084 -0.0741945938 -0.0069035722); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color.change(oklch(0% 1 0deg), $lightness: -10%), display-p3)} + +<===> out_of_range/near/output.css +a { + b: color(display-p3 0.3493925785 -0.240514802 -0.0760588329); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% 999999 0deg), display-p3)} + +<===> out_of_range/far/output.css +a { + b: color(display-p3 16964742.301441267 -11051293.581589133 -2566311.5001529297); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% 0.1 30deg / 0.4), display-p3)} + +<===> alpha/partial/output.css +a { + b: color(display-p3 0.0863974377 -0.022155665 -0.0050290551 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% 0.1 30deg / 0.0), display-p3)} + +<===> alpha/transparent/output.css +a { + b: color(display-p3 0.0863974377 -0.022155665 -0.0050290551 / 0); +} + +<===> +================================================================================ +<===> missing/lightness/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(none 0.1 30deg), display-p3)} + +<===> missing/lightness/output.css +a { + b: color(display-p3 0.0031329176 0.0002226378 -0.0075165654); +} + +<===> +================================================================================ +<===> missing/chroma/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% none 30deg), display-p3)} + +<===> missing/chroma/output.css +a { + b: color(display-p3 0.0129199993 0.0129200002 0.0129200031); +} + +<===> +================================================================================ +<===> missing/hue/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% 0.1 none), display-p3)} + +<===> missing/hue/output.css +a { + b: color(display-p3 0.0784514548 -0.0192081243 0.0093493065); +} diff --git a/spec/core_functions/color/to_space/oklch/hsl.hrx b/spec/core_functions/color/to_space/oklch/hsl.hrx new file mode 100644 index 000000000..ecbef660a --- /dev/null +++ b/spec/core_functions/color/to_space/oklch/hsl.hrx @@ -0,0 +1,129 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(0% 0 0deg), hsl)} + +<===> black/output.css +a { + b: hsl(0, 0%, 0%); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(100% 0 0deg), hsl)} + +<===> white/output.css +a { + b: hsl(43.8135971986, 172.5242105081%, 100.0000042145%); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(50% 0 0deg), hsl)} + +<===> gray/output.css +a { + b: hsl(223.8135972091, 0.0000078676%, 38.8572876766%); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% 0.1 30deg), hsl)} + +<===> middle/output.css +a { + b: hsl(349.9222383971, 174.3087628098%, 3.6948783654%); +} + +<===> +================================================================================ +<===> float/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10.123456789% 0.198765432 30.192837465deg), hsl)} + +<===> float/output.css +a { + b: hsl(342.3640346721, 274.4922188663%, 4.7714615434%); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color.change(oklch(0% 1 0deg), $lightness: -10%), hsl)} + +<===> out_of_range/near/output.css +a { + b: hsl(342.6995890373, 454.6290714992%, 7.2218303523%); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% 999999 0deg), hsl)} + +<===> out_of_range/far/output.css +a { + b: hsl(160.1123681644, 426.4426548179%, 360094749.97600085%); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% 0.1 30deg / 0.4), hsl)} + +<===> alpha/partial/output.css +a { + b: hsla(349.9222383971, 174.3087628098%, 3.6948783654%, 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% 0.1 30deg / 0.0), hsl)} + +<===> alpha/transparent/output.css +a { + b: hsla(349.9222383971, 174.3087628098%, 3.6948783654%, 0); +} + +<===> +================================================================================ +<===> missing/lightness/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(none 0.1 30deg), hsl)} + +<===> missing/lightness/output.css +a { + b: hsl(221.7487183642, 266.6061391496%, 0%); +} + +<===> +================================================================================ +<===> missing/chroma/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% none 30deg), hsl)} + +<===> missing/chroma/output.css +a { + b: hsl(223.8135982915, 0%, 1.2920001239%); +} + +<===> +================================================================================ +<===> missing/hue/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% 0.1 none), hsl)} + +<===> missing/hue/output.css +a { + b: hsl(0, 169.3005035983%, 3.4369836375%); +} diff --git a/spec/core_functions/color/to_space/oklch/hwb.hrx b/spec/core_functions/color/to_space/oklch/hwb.hrx new file mode 100644 index 000000000..4800a1740 --- /dev/null +++ b/spec/core_functions/color/to_space/oklch/hwb.hrx @@ -0,0 +1,129 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(0% 0 0deg), hwb)} + +<===> black/output.css +a { + b: black; +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(100% 0 0deg), hwb)} + +<===> white/output.css +a { + b: hsl(43.8135971652, 172.5242119439%, 100.0000042145%); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(50% 0 0deg), hwb)} + +<===> gray/output.css +a { + b: hsl(223.8135972091, 0.0000078676%, 38.8572876766%); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% 0.1 30deg), hwb)} + +<===> middle/output.css +a { + b: hsl(349.9222383971, 174.3087628098%, 3.6948783654%); +} + +<===> +================================================================================ +<===> float/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10.123456789% 0.198765432 30.192837465deg), hwb)} + +<===> float/output.css +a { + b: hsl(342.3640346721, 274.4922188663%, 4.7714615434%); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color.change(oklch(0% 1 0deg), $lightness: -10%), hwb)} + +<===> out_of_range/near/output.css +a { + b: hsl(342.6995890373, 454.6290714992%, 7.2218303523%); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% 999999 0deg), hwb)} + +<===> out_of_range/far/output.css +a { + b: hsl(160.1123681644, 426.4426548179%, 360094749.9760007%); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% 0.1 30deg / 0.4), hwb)} + +<===> alpha/partial/output.css +a { + b: hsla(349.9222383971, 174.3087628098%, 3.6948783654%, 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% 0.1 30deg / 0.0), hwb)} + +<===> alpha/transparent/output.css +a { + b: hsla(349.9222383971, 174.3087628098%, 3.6948783654%, 0); +} + +<===> +================================================================================ +<===> missing/lightness/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(none 0.1 30deg), hwb)} + +<===> missing/lightness/output.css +a { + b: hsl(221.7487183642, 266.6061391496%, -0.2273359503%); +} + +<===> +================================================================================ +<===> missing/chroma/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% none 30deg), hwb)} + +<===> missing/chroma/output.css +a { + b: hsl(223.813598298, 0.0000165409%, 1.2920001239%); +} + +<===> +================================================================================ +<===> missing/hue/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% 0.1 none), hwb)} + +<===> missing/hue/output.css +a { + b: hsl(0, 169.3005035983%, 3.4369836375%); +} diff --git a/spec/core_functions/color/to_space/oklch/lab.hrx b/spec/core_functions/color/to_space/oklch/lab.hrx new file mode 100644 index 000000000..0dce01bdd --- /dev/null +++ b/spec/core_functions/color/to_space/oklch/lab.hrx @@ -0,0 +1,129 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(0% 0 0deg), lab)} + +<===> black/output.css +a { + b: lab(0% 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(100% 0 0deg), lab)} + +<===> white/output.css +a { + b: lab(100.0000005607% 0.0000001163 -0.0000141852); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(50% 0 0deg), lab)} + +<===> gray/output.css +a { + b: lab(42.0000002803% 0.0000000582 -0.0000070926); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% 0.1 30deg), lab)} + +<===> middle/output.css +a { + b: lab(0.6560445641% 11.6264793014 1.8588166268); +} + +<===> +================================================================================ +<===> float/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10.123456789% 0.198765432 30.192837465deg), lab)} + +<===> float/output.css +a { + b: lab(0.4361236096% 33.2605943231 2.095776706); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color.change(oklch(0% 1 0deg), $lightness: -10%), lab)} + +<===> out_of_range/near/output.css +a { + b: lab(-8.0782541499% 134.1196456989 -0.0824759946); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% 999999 0deg), lab)} + +<===> out_of_range/far/output.css +a { + b: lab(-1245011123236616704% 5366427255548952576 6959562484441118720); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% 0.1 30deg / 0.4), lab)} + +<===> alpha/partial/output.css +a { + b: lab(0.6560445641% 11.6264793014 1.8588166268 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% 0.1 30deg / 0.0), lab)} + +<===> alpha/transparent/output.css +a { + b: lab(0.6560445641% 11.6264793014 1.8588166268 / 0); +} + +<===> +================================================================================ +<===> missing/lightness/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(none 0.1 30deg), lab)} + +<===> missing/lightness/output.css +a { + b: lab(none 0.0322037834 0.9096922188); +} + +<===> +================================================================================ +<===> missing/chroma/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% none 30deg), lab)} + +<===> missing/chroma/output.css +a { + b: lab(0.9032963094% 0.0000000027 -0.0000003314); +} + +<===> +================================================================================ +<===> missing/hue/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% 0.1 none), lab)} + +<===> missing/hue/output.css +a { + b: lab(0.6385915087% 10.5093876004 0.1611873791); +} diff --git a/spec/core_functions/color/to_space/oklch/lch.hrx b/spec/core_functions/color/to_space/oklch/lch.hrx new file mode 100644 index 000000000..44e7075fd --- /dev/null +++ b/spec/core_functions/color/to_space/oklch/lch.hrx @@ -0,0 +1,129 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(0% 0 0deg), lch)} + +<===> black/output.css +a { + b: lch(0% 0 none); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(100% 0 0deg), lch)} + +<===> white/output.css +a { + b: lch(100.0000005607% 0.0000141857 270.4699000403deg); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(50% 0 0deg), lch)} + +<===> gray/output.css +a { + b: lch(42.0000002803% 0.0000070929 270.4699000403deg); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% 0.1 30deg), lch)} + +<===> middle/output.css +a { + b: lch(0.6560445641% 11.7741335222 9.0834533485deg); +} + +<===> +================================================================================ +<===> float/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10.123456789% 0.198765432 30.192837465deg), lch)} + +<===> float/output.css +a { + b: lch(0.4361236096% 33.3265571988 3.6054863359deg); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color.change(oklch(0% 1 0deg), $lightness: -10%), lch)} + +<===> out_of_range/near/output.css +a { + b: lch(-8.0782541499% 134.1196710579 359.9647663414deg); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% 999999 0deg), lch)} + +<===> out_of_range/far/output.css +a { + b: lch(-1245011123236616704% 8788290588273632256 52.3646552277deg); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% 0.1 30deg / 0.4), lch)} + +<===> alpha/partial/output.css +a { + b: lch(0.6560445641% 11.7741335222 9.0834533485deg / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% 0.1 30deg / 0.0), lch)} + +<===> alpha/transparent/output.css +a { + b: lch(0.6560445641% 11.7741335222 9.0834533485deg / 0); +} + +<===> +================================================================================ +<===> missing/lightness/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(none 0.1 30deg), lch)} + +<===> missing/lightness/output.css +a { + b: lch(none 0.9102620593 87.9725333167deg); +} + +<===> +================================================================================ +<===> missing/chroma/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% none 30deg), lch)} + +<===> missing/chroma/output.css +a { + b: lch(0.9032963094% none 270.4698988243deg); +} + +<===> +================================================================================ +<===> missing/hue/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% 0.1 none), lch)} + +<===> missing/hue/output.css +a { + b: lch(0.6385915087% 10.5106236307 none); +} diff --git a/spec/core_functions/color/to_space/oklch/oklab.hrx b/spec/core_functions/color/to_space/oklch/oklab.hrx new file mode 100644 index 000000000..8190d5db5 --- /dev/null +++ b/spec/core_functions/color/to_space/oklch/oklab.hrx @@ -0,0 +1,129 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(0% 0 0deg), oklab)} + +<===> black/output.css +a { + b: oklab(0% 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(100% 0 0deg), oklab)} + +<===> white/output.css +a { + b: oklab(100% 0 0); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(50% 0 0deg), oklab)} + +<===> gray/output.css +a { + b: oklab(50% 0 0); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% 0.1 30deg), oklab)} + +<===> middle/output.css +a { + b: oklab(10% 0.0866025404 0.05); +} + +<===> +================================================================================ +<===> float/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10.123456789% 0.198765432 30.192837465deg), oklab)} + +<===> float/output.css +a { + b: oklab(10.123456789% 0.1718004519 0.099961501); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color.change(oklch(0% 1 0deg), $lightness: -10%), oklab)} + +<===> out_of_range/near/output.css +a { + b: oklab(-10% 1 0); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% 999999 0deg), oklab)} + +<===> out_of_range/far/output.css +a { + b: oklab(10% 999998.9999999994 0); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% 0.1 30deg / 0.4), oklab)} + +<===> alpha/partial/output.css +a { + b: oklab(10% 0.0866025404 0.05 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% 0.1 30deg / 0.0), oklab)} + +<===> alpha/transparent/output.css +a { + b: oklab(10% 0.0866025404 0.05 / 0); +} + +<===> +================================================================================ +<===> missing/lightness/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(none 0.1 30deg), oklab)} + +<===> missing/lightness/output.css +a { + b: oklab(none 0.0866025404 0.05); +} + +<===> +================================================================================ +<===> missing/chroma/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% none 30deg), oklab)} + +<===> missing/chroma/output.css +a { + b: oklab(10% 0 0); +} + +<===> +================================================================================ +<===> missing/hue/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% 0.1 none), oklab)} + +<===> missing/hue/output.css +a { + b: oklab(10% 0.1 0); +} diff --git a/spec/core_functions/color/to_space/oklch/oklch.hrx b/spec/core_functions/color/to_space/oklch/oklch.hrx new file mode 100644 index 000000000..e0782431c --- /dev/null +++ b/spec/core_functions/color/to_space/oklch/oklch.hrx @@ -0,0 +1,52 @@ +<===> in_range/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% 0.1 30deg), oklch)} + +<===> in_range/output.css +a { + b: oklch(10% 0.1 30deg); +} + +<===> +================================================================================ +<===> out_of_range/input.scss +@use 'sass:color'; +a {b: color.to-space(color.change(oklch(0% 1 0deg), $lightness: -10%), oklch)} + +<===> out_of_range/output.css +a { + b: oklch(-10% 1 0deg); +} + +<===> +================================================================================ +<===> missing/lightness/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(none 0.1 30deg), oklch)} + +<===> missing/lightness/output.css +a { + b: oklch(none 0.1 30deg); +} + +<===> +================================================================================ +<===> missing/chroma/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% none 30deg), oklch)} + +<===> missing/chroma/output.css +a { + b: oklch(10% none 30deg); +} + +<===> +================================================================================ +<===> missing/hue/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% 0.1 none), oklch)} + +<===> missing/hue/output.css +a { + b: oklch(10% 0.1 none); +} diff --git a/spec/core_functions/color/to_space/oklch/prophoto_rgb.hrx b/spec/core_functions/color/to_space/oklch/prophoto_rgb.hrx new file mode 100644 index 000000000..b95ded68d --- /dev/null +++ b/spec/core_functions/color/to_space/oklch/prophoto_rgb.hrx @@ -0,0 +1,129 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(0% 0 0deg), prophoto-rgb)} + +<===> black/output.css +a { + b: color(prophoto-rgb 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(100% 0 0deg), prophoto-rgb)} + +<===> white/output.css +a { + b: color(prophoto-rgb 1.0000000036 1.0000000099 1.0000001263); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(50% 0 0deg), prophoto-rgb)} + +<===> gray/output.css +a { + b: color(prophoto-rgb 0.3149802636 0.3149802656 0.3149803022); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% 0.1 30deg), prophoto-rgb)} + +<===> middle/output.css +a { + b: color(prophoto-rgb 0.0506096466 -0.0137951641 -0.0074760688); +} + +<===> +================================================================================ +<===> float/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10.123456789% 0.198765432 30.192837465deg), prophoto-rgb)} + +<===> float/output.css +a { + b: color(prophoto-rgb 0.0841896026 -0.0467124006 -0.013805913); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color.change(oklch(0% 1 0deg), $lightness: -10%), prophoto-rgb)} + +<===> out_of_range/near/output.css +a { + b: color(prophoto-rgb 0.1937443943 -0.1519484627 -0.0725277832); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% 999999 0deg), prophoto-rgb)} + +<===> out_of_range/far/output.css +a { + b: color(prophoto-rgb 2922140081.0303516 -1810418807.7705455 -574654139.8912412); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% 0.1 30deg / 0.4), prophoto-rgb)} + +<===> alpha/partial/output.css +a { + b: color(prophoto-rgb 0.0506096466 -0.0137951641 -0.0074760688 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% 0.1 30deg / 0.0), prophoto-rgb)} + +<===> alpha/transparent/output.css +a { + b: color(prophoto-rgb 0.0506096466 -0.0137951641 -0.0074760688 / 0); +} + +<===> +================================================================================ +<===> missing/lightness/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(none 0.1 30deg), prophoto-rgb)} + +<===> missing/lightness/output.css +a { + b: color(prophoto-rgb 0.0010727238 0.000279135 -0.0088387805); +} + +<===> +================================================================================ +<===> missing/chroma/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% none 30deg), prophoto-rgb)} + +<===> missing/chroma/output.css +a { + b: color(prophoto-rgb 0.0160000001 0.0160000003 0.0160000036); +} + +<===> +================================================================================ +<===> missing/hue/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% 0.1 none), prophoto-rgb)} + +<===> missing/hue/output.css +a { + b: color(prophoto-rgb 0.0479066375 -0.0113980141 0.0096553537); +} diff --git a/spec/core_functions/color/to_space/oklch/rec2020.hrx b/spec/core_functions/color/to_space/oklch/rec2020.hrx new file mode 100644 index 000000000..65d2714c4 --- /dev/null +++ b/spec/core_functions/color/to_space/oklch/rec2020.hrx @@ -0,0 +1,129 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(0% 0 0deg), rec2020)} + +<===> black/output.css +a { + b: color(rec2020 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(100% 0 0deg), rec2020)} + +<===> white/output.css +a { + b: color(rec2020 0.9999999872 1.0000000081 1.0000001161); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(50% 0 0deg), rec2020)} + +<===> gray/output.css +a { + b: color(rec2020 0.3319485728 0.3319485809 0.3319486233); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% 0.1 30deg), rec2020)} + +<===> middle/output.css +a { + b: color(rec2020 0.0256576867 -0.0056343197 -0.0019025127); +} + +<===> +================================================================================ +<===> float/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10.123456789% 0.198765432 30.192837465deg), rec2020)} + +<===> float/output.css +a { + b: color(rec2020 0.064418765 -0.0232002216 -0.0029907849); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color.change(oklch(0% 1 0deg), $lightness: -10%), rec2020)} + +<===> out_of_range/near/output.css +a { + b: color(rec2020 0.2237639493 -0.1587187375 -0.0339392569); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% 999999 0deg), rec2020)} + +<===> out_of_range/far/output.css +a { + b: color(rec2020 56131778.24188723 -38257541.3895273 -10955273.518136343); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% 0.1 30deg / 0.4), rec2020)} + +<===> alpha/partial/output.css +a { + b: color(rec2020 0.0256576867 -0.0056343197 -0.0019025127 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% 0.1 30deg / 0.0), rec2020)} + +<===> alpha/transparent/output.css +a { + b: color(rec2020 0.0256576867 -0.0056343197 -0.0019025127 / 0); +} + +<===> +================================================================================ +<===> missing/lightness/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(none 0.1 30deg), rec2020)} + +<===> missing/lightness/output.css +a { + b: color(rec2020 0.0007134353 0.0000902745 -0.002575042); +} + +<===> +================================================================================ +<===> missing/chroma/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% none 30deg), rec2020)} + +<===> missing/chroma/output.css +a { + b: color(rec2020 0.0044999999 0.0045000001 0.0045000011); +} + +<===> +================================================================================ +<===> missing/hue/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% 0.1 none), rec2020)} + +<===> missing/hue/output.css +a { + b: color(rec2020 0.0225650026 -0.0048194756 0.0030470892); +} diff --git a/spec/core_functions/color/to_space/oklch/rgb.hrx b/spec/core_functions/color/to_space/oklch/rgb.hrx new file mode 100644 index 000000000..98ec3a4d6 --- /dev/null +++ b/spec/core_functions/color/to_space/oklch/rgb.hrx @@ -0,0 +1,129 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(0% 0 0deg), rgb)} + +<===> black/output.css +a { + b: black; +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(100% 0 0deg), rgb)} + +<===> white/output.css +a { + b: hsl(43.8135971986, 172.5242105081%, 100.0000042145%); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(50% 0 0deg), rgb)} + +<===> gray/output.css +a { + b: rgb(99.0860757797, 99.0860799859, 99.0860913711); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% 0.1 30deg), rgb)} + +<===> middle/output.css +a { + b: hsl(349.9222383971, 174.3087628098%, 3.6948783654%); +} + +<===> +================================================================================ +<===> float/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10.123456789% 0.198765432 30.192837465deg), rgb)} + +<===> float/output.css +a { + b: hsl(342.3640346721, 274.4922188663%, 4.7714615434%); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color.change(oklch(0% 1 0deg), $lightness: -10%), rgb)} + +<===> out_of_range/near/output.css +a { + b: hsl(342.6995890373, 454.6290714992%, 7.2218303523%); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% 999999 0deg), rgb)} + +<===> out_of_range/far/output.css +a { + b: hsl(160.1123681644, 426.4426548179%, 360094749.97600085%); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% 0.1 30deg / 0.4), rgb)} + +<===> alpha/partial/output.css +a { + b: hsla(349.9222383971, 174.3087628098%, 3.6948783654%, 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% 0.1 30deg / 0.0), rgb)} + +<===> alpha/transparent/output.css +a { + b: hsla(349.9222383971, 174.3087628098%, 3.6948783654%, 0); +} + +<===> +================================================================================ +<===> missing/lightness/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(none 0.1 30deg), rgb)} + +<===> missing/lightness/output.css +a { + b: hsl(221.7487183642, 266.6061391496%, -0.2273359503%); +} + +<===> +================================================================================ +<===> missing/chroma/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% none 30deg), rgb)} + +<===> missing/chroma/output.css +a { + b: rgb(3.2945997709, 3.2946000649, 3.2946008608); +} + +<===> +================================================================================ +<===> missing/hue/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% 0.1 none), rgb)} + +<===> missing/hue/output.css +a { + b: hsl(342.5627231518, 169.3005035983%, 3.4369836375%); +} diff --git a/spec/core_functions/color/to_space/oklch/srgb.hrx b/spec/core_functions/color/to_space/oklch/srgb.hrx new file mode 100644 index 000000000..c19e28b85 --- /dev/null +++ b/spec/core_functions/color/to_space/oklch/srgb.hrx @@ -0,0 +1,129 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(0% 0 0deg), srgb)} + +<===> black/output.css +a { + b: color(srgb 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(100% 0 0deg), srgb)} + +<===> white/output.css +a { + b: color(srgb 0.9999999694 1.0000000087 1.0000001149); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(50% 0 0deg), srgb)} + +<===> gray/output.css +a { + b: color(srgb 0.3885728462 0.3885728627 0.3885729073); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% 0.1 30deg), srgb)} + +<===> middle/output.css +a { + b: color(srgb 0.1013537513 -0.027456184 -0.0058209203); +} + +<===> +================================================================================ +<===> float/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10.123456789% 0.198765432 30.192837465deg), srgb)} + +<===> float/output.css +a { + b: color(srgb 0.1786875221 -0.0832582912 -0.0062638365); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color.change(oklch(0% 1 0deg), $lightness: -10%), srgb)} + +<===> out_of_range/near/output.css +a { + b: color(srgb 0.4005437063 -0.2561070992 -0.066768286); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% 999999 0deg), srgb)} + +<===> out_of_range/far/output.css +a { + b: color(srgb 18956919.35191059 -11755024.352390574 -1575227.1966261775); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% 0.1 30deg / 0.4), srgb)} + +<===> alpha/partial/output.css +a { + b: color(srgb 0.1013537513 -0.027456184 -0.0058209203 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% 0.1 30deg / 0.0), srgb)} + +<===> alpha/transparent/output.css +a { + b: color(srgb 0.1013537513 -0.027456184 -0.0058209203 / 0); +} + +<===> +================================================================================ +<===> missing/lightness/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(none 0.1 30deg), srgb)} + +<===> missing/lightness/output.css +a { + b: color(srgb 0.0037875565 0.0001002403 -0.0083342755); +} + +<===> +================================================================================ +<===> missing/chroma/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% none 30deg), srgb)} + +<===> missing/chroma/output.css +a { + b: color(srgb 0.0129199991 0.0129200003 0.0129200034); +} + +<===> +================================================================================ +<===> missing/hue/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% 0.1 none), srgb)} + +<===> missing/hue/output.css +a { + b: color(srgb 0.0925581424 -0.0238184697 0.0100030504); +} diff --git a/spec/core_functions/color/to_space/oklch/srgb_linear.hrx b/spec/core_functions/color/to_space/oklch/srgb_linear.hrx new file mode 100644 index 000000000..cd128bb27 --- /dev/null +++ b/spec/core_functions/color/to_space/oklch/srgb_linear.hrx @@ -0,0 +1,129 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(0% 0 0deg), srgb-linear)} + +<===> black/output.css +a { + b: color(srgb-linear 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(100% 0 0deg), srgb-linear)} + +<===> white/output.css +a { + b: color(srgb-linear 0.9999999305 1.0000000197 1.0000002613); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(50% 0 0deg), srgb-linear)} + +<===> gray/output.css +a { + b: color(srgb-linear 0.1249999913 0.1250000025 0.1250000327); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% 0.1 30deg), srgb-linear)} + +<===> middle/output.css +a { + b: color(srgb-linear 0.0102342031 -0.0021250916 -0.0004505356); +} + +<===> +================================================================================ +<===> float/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10.123456789% 0.198765432 30.192837465deg), srgb-linear)} + +<===> float/output.css +a { + b: color(srgb-linear 0.0268484583 -0.00761821 -0.0004848171); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color.change(oklch(0% 1 0deg), $lightness: -10%), srgb-linear)} + +<===> out_of_range/near/output.css +a { + b: color(srgb-linear 0.1332496936 -0.0533553421 -0.0056166345); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% 999999 0deg), srgb-linear)} + +<===> out_of_range/far/output.css +a { + b: color(srgb-linear 257535278804612064 -81795720332859872 -657382012471774.5); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% 0.1 30deg / 0.4), srgb-linear)} + +<===> alpha/partial/output.css +a { + b: color(srgb-linear 0.0102342031 -0.0021250916 -0.0004505356 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% 0.1 30deg / 0.0), srgb-linear)} + +<===> alpha/transparent/output.css +a { + b: color(srgb-linear 0.0102342031 -0.0021250916 -0.0004505356 / 0); +} + +<===> +================================================================================ +<===> missing/lightness/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(none 0.1 30deg), srgb-linear)} + +<===> missing/lightness/output.css +a { + b: color(srgb-linear 0.0002931545 0.0000077585 -0.0006450678); +} + +<===> +================================================================================ +<===> missing/chroma/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% none 30deg), srgb-linear)} + +<===> missing/chroma/output.css +a { + b: color(srgb-linear 0.0009999999 0.001 0.0010000003); +} + +<===> +================================================================================ +<===> missing/hue/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% 0.1 none), srgb-linear)} + +<===> missing/hue/output.css +a { + b: color(srgb-linear 0.0089064724 -0.0018435348 0.0007742299); +} diff --git a/spec/core_functions/color/to_space/oklch/xyz.hrx b/spec/core_functions/color/to_space/oklch/xyz.hrx new file mode 100644 index 000000000..c1be0a4b2 --- /dev/null +++ b/spec/core_functions/color/to_space/oklch/xyz.hrx @@ -0,0 +1,129 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(0% 0 0deg), xyz)} + +<===> black/output.css +a { + b: color(xyz 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(100% 0 0deg), xyz)} + +<===> white/output.css +a { + b: color(xyz 0.9504559526 1.0000000182 1.0890580001); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(50% 0 0deg), xyz)} + +<===> gray/output.css +a { + b: color(xyz 0.1188069941 0.1250000023 0.13613225); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% 0.1 30deg), xyz)} + +<===> middle/output.css +a { + b: color(xyz 0.0033792787 0.0006238666 -0.0004837129); +} + +<===> +================================================================================ +<===> float/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10.123456789% 0.198765432 30.192837465deg), xyz)} + +<===> float/output.css +a { + b: color(xyz 0.0082604044 0.0002257242 -0.0008498824); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color.change(oklch(0% 1 0deg), $lightness: -10%), xyz)} + +<===> out_of_range/near/output.css +a { + b: color(xyz 0.0348582183 -0.010229465 -0.0091226442); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% 999999 0deg), xyz)} + +<===> out_of_range/far/output.css +a { + b: color(xyz 76837666021869456 -3783149507010139 -5396117824941693); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% 0.1 30deg / 0.4), xyz)} + +<===> alpha/partial/output.css +a { + b: color(xyz 0.0033792787 0.0006238666 -0.0004837129 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% 0.1 30deg / 0.0), xyz)} + +<===> alpha/transparent/output.css +a { + b: color(xyz 0.0033792787 0.0006238666 -0.0004837129 / 0); +} + +<===> +================================================================================ +<===> missing/lightness/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(none 0.1 30deg), xyz)} + +<===> missing/lightness/output.css +a { + b: color(xyz 0.0000072462 0.0000213158 -0.000606566); +} + +<===> +================================================================================ +<===> missing/chroma/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% none 30deg), xyz)} + +<===> missing/chroma/output.css +a { + b: color(xyz 0.000950456 0.001 0.001089058); +} + +<===> +================================================================================ +<===> missing/hue/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% 0.1 none), xyz)} + +<===> missing/hue/output.css +a { + b: color(xyz 0.0031534617 0.0006313185 0.0006883601); +} diff --git a/spec/core_functions/color/to_space/oklch/xyz_d50.hrx b/spec/core_functions/color/to_space/oklch/xyz_d50.hrx new file mode 100644 index 000000000..b5d286107 --- /dev/null +++ b/spec/core_functions/color/to_space/oklch/xyz_d50.hrx @@ -0,0 +1,129 @@ +<===> black/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(0% 0 0deg), xyz-d50)} + +<===> black/output.css +a { + b: color(xyz-d50 0 0 0); +} + +<===> +================================================================================ +<===> white/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(100% 0 0deg), xyz-d50)} + +<===> white/output.css +a { + b: color(xyz-d50 0.9642956911 1.0000000145 0.82510479); +} + +<===> +================================================================================ +<===> gray/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(50% 0 0deg), xyz-d50)} + +<===> gray/output.css +a { + b: color(xyz-d50 0.1205369614 0.1250000018 0.1031380988); +} + +<===> +================================================================================ +<===> middle/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% 0.1 30deg), xyz-d50)} + +<===> middle/output.css +a { + b: color(xyz-d50 0.0035798412 0.0007262784 -0.0003855337); +} + +<===> +================================================================================ +<===> float/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10.123456789% 0.198765432 30.192837465deg), xyz-d50)} + +<===> float/output.css +a { + b: color(xyz-d50 0.0087041611 0.0004828135 -0.0007119576); +} + +<===> +================================================================================ +<===> out_of_range/near/input.scss +@use 'sass:color'; +a {b: color.to-space(color.change(oklch(0% 1 0deg), $lightness: -10%), xyz-d50)} + +<===> out_of_range/near/output.css +a { + b: color(xyz-d50 0.0367521174 -0.0089430834 -0.007335284); +} + +<===> +================================================================================ +<===> out_of_range/far/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% 999999 0deg), xyz-d50)} + +<===> out_of_range/far/output.css +a { + b: color(xyz-d50 80704511354532880 -1378297606600871.2 -4824371922593688); +} + +<===> +================================================================================ +<===> alpha/partial/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% 0.1 30deg / 0.4), xyz-d50)} + +<===> alpha/partial/output.css +a { + b: color(xyz-d50 0.0035798412 0.0007262784 -0.0003855337 / 0.4); +} + +<===> +================================================================================ +<===> alpha/transparent/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% 0.1 30deg / 0.0), xyz-d50)} + +<===> alpha/transparent/output.css +a { + b: color(xyz-d50 0.0035798412 0.0007262784 -0.0003855337 / 0); +} + +<===> +================================================================================ +<===> missing/lightness/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(none 0.1 30deg), xyz-d50)} + +<===> missing/lightness/output.css +a { + b: color(xyz-d50 0.0000385276 0.000031683 -0.0004558074); +} + +<===> +================================================================================ +<===> missing/chroma/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% none 30deg), xyz-d50)} + +<===> missing/chroma/output.css +a { + b: color(xyz-d50 0.0009642957 0.001 0.0008251048); +} + +<===> +================================================================================ +<===> missing/hue/input.scss +@use 'sass:color'; +a {b: color.to-space(oklch(10% 0.1 none), xyz-d50)} + +<===> missing/hue/output.css +a { + b: color(xyz-d50 0.0032845429 0.0007069569 0.0004979173); +} From c9fdc6f4eba8be1a401ab0b09cd32840460c9f19 Mon Sep 17 00:00:00 2001 From: Natalie Weizenbaum Date: Mon, 1 Apr 2024 12:18:40 -0700 Subject: [PATCH 17/18] Update specs for out-of-bounds {ok,}l{ab,ch} --- spec/core_functions/color/to_space/hsl/lab.hrx | 4 ++-- spec/core_functions/color/to_space/hsl/lch.hrx | 4 ++-- spec/core_functions/color/to_space/hsl/oklab.hrx | 4 ++-- spec/core_functions/color/to_space/hsl/oklch.hrx | 4 ++-- spec/core_functions/color/to_space/hwb/lab.hrx | 4 ++-- spec/core_functions/color/to_space/hwb/lch.hrx | 4 ++-- spec/core_functions/color/to_space/hwb/oklab.hrx | 2 +- spec/core_functions/color/to_space/hwb/oklch.hrx | 2 +- spec/core_functions/color/to_space/lab/lch.hrx | 2 +- spec/core_functions/color/to_space/lab/oklab.hrx | 4 ++-- spec/core_functions/color/to_space/lab/oklch.hrx | 4 ++-- spec/core_functions/color/to_space/lch/lab.hrx | 2 +- spec/core_functions/color/to_space/lch/lch.hrx | 2 +- spec/core_functions/color/to_space/lch/oklab.hrx | 4 ++-- spec/core_functions/color/to_space/lch/oklch.hrx | 4 ++-- spec/core_functions/color/to_space/oklab/lab.hrx | 4 ++-- spec/core_functions/color/to_space/oklab/lch.hrx | 4 ++-- spec/core_functions/color/to_space/oklab/oklab.hrx | 2 +- spec/core_functions/color/to_space/oklab/oklch.hrx | 2 +- spec/core_functions/color/to_space/oklch/lab.hrx | 6 +++--- spec/core_functions/color/to_space/oklch/lch.hrx | 6 +++--- spec/core_functions/color/to_space/oklch/oklab.hrx | 2 +- spec/core_functions/color/to_space/oklch/oklch.hrx | 2 +- 23 files changed, 39 insertions(+), 39 deletions(-) diff --git a/spec/core_functions/color/to_space/hsl/lab.hrx b/spec/core_functions/color/to_space/hsl/lab.hrx index fecfd6c5d..bf3a6b1b9 100644 --- a/spec/core_functions/color/to_space/hsl/lab.hrx +++ b/spec/core_functions/color/to_space/hsl/lab.hrx @@ -59,7 +59,7 @@ a {b: color.to-space(hsl(20deg 200% -50%), lab)} <===> out_of_range/near/output.css a { - b: lab(-513.5065001156% -2166.8947364799 -961.5323237913); + b: color-mix(in lab, color(xyz -1.0161268876 -0.540961491 0.1515884565) 100%, black); } <===> @@ -70,7 +70,7 @@ a {b: color.to-space(hsl(20deg 999999% 50%), lab)} <===> out_of_range/far/output.css a { - b: lab(48551.8202334035% 74362.5384197241 885141454894.8618); + b: color-mix(in lab, color(xyz 136956388.39988723 59264689.52803929 -623200798.6169883) 100%, black); } <===> diff --git a/spec/core_functions/color/to_space/hsl/lch.hrx b/spec/core_functions/color/to_space/hsl/lch.hrx index 82403d967..4414beb84 100644 --- a/spec/core_functions/color/to_space/hsl/lch.hrx +++ b/spec/core_functions/color/to_space/hsl/lch.hrx @@ -59,7 +59,7 @@ a {b: color.to-space(hsl(20deg 200% -50%), lch)} <===> out_of_range/near/output.css a { - b: lch(-513.5065001156% 2370.649111252 203.9286535376deg); + b: color-mix(in lch, color(xyz -1.0161268876 -0.540961491 0.1515884565) 100%, black); } <===> @@ -70,7 +70,7 @@ a {b: color.to-space(hsl(20deg 999999% 50%), lch)} <===> out_of_range/far/output.css a { - b: lch(48551.8202334035% 885141454894.8649 89.9999951865deg); + b: color-mix(in lch, color(xyz 136956388.67576775 59264689.51984791 -623200798.6134329) 100%, black); } <===> diff --git a/spec/core_functions/color/to_space/hsl/oklab.hrx b/spec/core_functions/color/to_space/hsl/oklab.hrx index 36fe87bd5..b2b651530 100644 --- a/spec/core_functions/color/to_space/hsl/oklab.hrx +++ b/spec/core_functions/color/to_space/hsl/oklab.hrx @@ -59,7 +59,7 @@ a {b: color.to-space(hsl(20deg 200% -50%), oklab)} <===> out_of_range/near/output.css a { - b: oklab(-85.4424007146% -0.2487806208 -0.2899766738); + b: color-mix(in oklab, color(xyz -1.0161268876 -0.540961491 0.1515884565) 100%, black); } <===> @@ -70,7 +70,7 @@ a {b: color.to-space(hsl(20deg 999999% 50%), oklab)} <===> out_of_range/far/output.css a { - b: oklab(39340.6349854451% 49.0298431734 858.3776182776); + b: color-mix(in oklab, color(xyz 136956388.3998871 59264689.52803931 -623200798.6169885) 100%, black); } <===> diff --git a/spec/core_functions/color/to_space/hsl/oklch.hrx b/spec/core_functions/color/to_space/hsl/oklch.hrx index 48a93275a..f9fda4187 100644 --- a/spec/core_functions/color/to_space/hsl/oklch.hrx +++ b/spec/core_functions/color/to_space/hsl/oklch.hrx @@ -59,7 +59,7 @@ a {b: color.to-space(hsl(20deg 200% -50%), oklch)} <===> out_of_range/near/output.css a { - b: oklch(-85.4424007146% 0.3820710257 229.3726104717deg); + b: color-mix(in oklch, color(xyz -1.0161268876 -0.540961491 0.1515884565) 100%, black); } <===> @@ -70,7 +70,7 @@ a {b: color.to-space(hsl(20deg 999999% 50%), oklch)} <===> out_of_range/far/output.css a { - b: oklch(39340.6349854451% 859.7767507217 86.7308631003deg); + b: color-mix(in oklch, color(xyz 136956388.39988703 59264689.52803931 -623200798.6169883) 100%, black); } <===> diff --git a/spec/core_functions/color/to_space/hwb/lab.hrx b/spec/core_functions/color/to_space/hwb/lab.hrx index de54cec42..32f1bf6a5 100644 --- a/spec/core_functions/color/to_space/hwb/lab.hrx +++ b/spec/core_functions/color/to_space/hwb/lab.hrx @@ -59,7 +59,7 @@ a {b: color.to-space(hwb(20deg 200% -125%), lab)} <===> out_of_range/near/output.css a { - b: lab(190.7145135415% 10.5586740456 13.5288110625); + b: color-mix(in lab, color(xyz 5.5338099778 5.6426521513 5.4845096668) 100%, black); } <===> @@ -70,7 +70,7 @@ a {b: color.to-space(hwb(20deg 999999% -999950%), lab)} <===> out_of_range/far/output.css a { - b: lab(176127.1511703222% 3.8377999266 5.0226200661); + b: color-mix(in lab, color(xyz 3327825161.664072 3501247104.3035965 3812875110.896886) 100%, black); } <===> diff --git a/spec/core_functions/color/to_space/hwb/lch.hrx b/spec/core_functions/color/to_space/hwb/lch.hrx index 80081d315..1739ce2ab 100644 --- a/spec/core_functions/color/to_space/hwb/lch.hrx +++ b/spec/core_functions/color/to_space/hwb/lch.hrx @@ -59,7 +59,7 @@ a {b: color.to-space(hwb(20deg 200% -125%), lch)} <===> out_of_range/near/output.css a { - b: lch(190.7145135415% 17.1614197072 52.029443744deg); + b: color-mix(in lch, color(xyz 5.5338099778 5.6426521513 5.4845096668) 100%, black); } <===> @@ -70,7 +70,7 @@ a {b: color.to-space(hwb(20deg 999999% -999950%), lch)} <===> out_of_range/far/output.css a { - b: lch(176127.1511703222% 6.3210300272 52.6164400119deg); + b: color-mix(in lch, color(xyz 3327825161.664072 3501247104.3035965 3812875110.896886) 100%, black); } <===> diff --git a/spec/core_functions/color/to_space/hwb/oklab.hrx b/spec/core_functions/color/to_space/hwb/oklab.hrx index 45e5173ae..8fd0ad280 100644 --- a/spec/core_functions/color/to_space/hwb/oklab.hrx +++ b/spec/core_functions/color/to_space/hwb/oklab.hrx @@ -70,7 +70,7 @@ a {b: color.to-space(hwb(20deg 999999% -999950%), oklab)} <===> out_of_range/far/output.css a { - b: oklab(151847.6076958909% 0.0114875398 0.0131560475); + b: color-mix(in oklab, color(xyz 3327825161.6640716 3501247104.3035994 3812875110.896889) 100%, black); } <===> diff --git a/spec/core_functions/color/to_space/hwb/oklch.hrx b/spec/core_functions/color/to_space/hwb/oklch.hrx index c7ede1724..9604330b0 100644 --- a/spec/core_functions/color/to_space/hwb/oklch.hrx +++ b/spec/core_functions/color/to_space/hwb/oklch.hrx @@ -70,7 +70,7 @@ a {b: color.to-space(hwb(20deg 999999% -999950%), oklch)} <===> out_of_range/far/output.css a { - b: oklch(151847.6076958909% 0.017465542 48.873331133deg); + b: color-mix(in oklch, color(xyz 3327825161.6640716 3501247104.3035994 3812875110.896889) 100%, black); } <===> diff --git a/spec/core_functions/color/to_space/lab/lch.hrx b/spec/core_functions/color/to_space/lab/lch.hrx index 01f3db756..dc1029057 100644 --- a/spec/core_functions/color/to_space/lab/lch.hrx +++ b/spec/core_functions/color/to_space/lab/lch.hrx @@ -48,7 +48,7 @@ a {b: color.to-space(color.change(lab(0% -150 150), $lightness: -50%), lch)} <===> out_of_range/near/output.css a { - b: lch(-50% 212.132034356 135deg); + b: color-mix(in lch, color(xyz -0.0931334424 -0.0559710307 -0.1664628061) 100%, black); } <===> diff --git a/spec/core_functions/color/to_space/lab/oklab.hrx b/spec/core_functions/color/to_space/lab/oklab.hrx index e35a5f177..bc5714f24 100644 --- a/spec/core_functions/color/to_space/lab/oklab.hrx +++ b/spec/core_functions/color/to_space/lab/oklab.hrx @@ -48,7 +48,7 @@ a {b: color.to-space(color.change(lab(0% -150 150), $lightness: -50%), oklab)} <===> out_of_range/near/output.css a { - b: oklab(-39.9330761333% -0.1030518317 0.0848187875); + b: color-mix(in oklab, color(xyz -0.0931334424 -0.0559710307 -0.1664628061) 100%, black); } <===> @@ -59,7 +59,7 @@ a {b: color.to-space(lab(50% -999999 0), oklab)} <===> out_of_range/far/output.css a { - b: oklab(-204.6361483967% -9.8154760573 0.8330217301); + b: color-mix(in oklab, color(xyz -236.5825482412 7.2139420412 -2.8507109462) 100%, black); } <===> diff --git a/spec/core_functions/color/to_space/lab/oklch.hrx b/spec/core_functions/color/to_space/lab/oklch.hrx index 6f3ef889b..3b514f14f 100644 --- a/spec/core_functions/color/to_space/lab/oklch.hrx +++ b/spec/core_functions/color/to_space/lab/oklch.hrx @@ -48,7 +48,7 @@ a {b: color.to-space(color.change(lab(0% -150 150), $lightness: -50%), oklch)} <===> out_of_range/near/output.css a { - b: oklch(-39.9330761333% 0.1334687481 140.5432562845deg); + b: color-mix(in oklch, color(xyz -0.0931334424 -0.0559710307 -0.1664628061) 100%, black); } <===> @@ -59,7 +59,7 @@ a {b: color.to-space(lab(50% -999999 0), oklch)} <===> out_of_range/far/output.css a { - b: oklch(-204.6361483967% 9.8507611602 175.149034898deg); + b: color-mix(in oklch, color(xyz -236.5825482412 7.2139420412 -2.8507109462) 100%, black); } <===> diff --git a/spec/core_functions/color/to_space/lch/lab.hrx b/spec/core_functions/color/to_space/lch/lab.hrx index 9cf45c496..2fe08c506 100644 --- a/spec/core_functions/color/to_space/lch/lab.hrx +++ b/spec/core_functions/color/to_space/lch/lab.hrx @@ -59,7 +59,7 @@ a {b: color.to-space(color.change(lch(0% 200 0deg), $lightness: -10%), lab)} <===> out_of_range/near/output.css a { - b: lab(-10% 200 0); + b: color-mix(in lab, color(xyz 0.0846054544 -0.0138950708 -0.0108304931) 100%, black); } <===> diff --git a/spec/core_functions/color/to_space/lch/lch.hrx b/spec/core_functions/color/to_space/lch/lch.hrx index a3889d6bf..ba45e1f7b 100644 --- a/spec/core_functions/color/to_space/lch/lch.hrx +++ b/spec/core_functions/color/to_space/lch/lch.hrx @@ -15,7 +15,7 @@ a {b: color.to-space(color.change(lch(0% 200 0deg), $lightness: -10%), lch)} <===> out_of_range/output.css a { - b: lch(-10% 200 0deg); + b: color-mix(in lch, color(xyz 0.0846054544 -0.0138950708 -0.0108304931) 100%, black); } <===> diff --git a/spec/core_functions/color/to_space/lch/oklab.hrx b/spec/core_functions/color/to_space/lch/oklab.hrx index 1a1154a23..45cc15adf 100644 --- a/spec/core_functions/color/to_space/lch/oklab.hrx +++ b/spec/core_functions/color/to_space/lch/oklab.hrx @@ -59,7 +59,7 @@ a {b: color.to-space(color.change(lch(0% 200 0deg), $lightness: -10%), oklab)} <===> out_of_range/near/output.css a { - b: oklab(-8.8195010816% 1.2461066083 -0.0104428032); + b: color-mix(in oklab, color(xyz 0.0846054544 -0.0138950708 -0.0108304931) 100%, black); } <===> @@ -70,7 +70,7 @@ a {b: color.to-space(lch(10% 999999 0deg), oklab)} <===> out_of_range/far/output.css a { - b: oklab(65685.0863648626% 3051.4896291695 -252.41535167); + b: color-mix(in oklab, color(xyz 7373327412.161988 -218927236.26953584 95026466.80033648) 100%, black); } <===> diff --git a/spec/core_functions/color/to_space/lch/oklch.hrx b/spec/core_functions/color/to_space/lch/oklch.hrx index 6855b8c39..6f3c43298 100644 --- a/spec/core_functions/color/to_space/lch/oklch.hrx +++ b/spec/core_functions/color/to_space/lch/oklch.hrx @@ -59,7 +59,7 @@ a {b: color.to-space(color.change(lch(0% 200 0deg), $lightness: -10%), oklch)} <===> out_of_range/near/output.css a { - b: oklch(-8.8195010816% 1.2461503647 359.519852843deg); + b: color-mix(in oklch, color(xyz 0.0846054544 -0.0138950708 -0.0108304931) 100%, black); } <===> @@ -70,7 +70,7 @@ a {b: color.to-space(lch(10% 999999 0deg), oklch)} <===> out_of_range/far/output.css a { - b: oklch(65685.0863648626% 3061.9115706839 355.2713313124deg); + b: color-mix(in oklch, color(xyz 7373327412.161987 -218927236.2695358 95026466.80033481) 100%, black); } <===> diff --git a/spec/core_functions/color/to_space/oklab/lab.hrx b/spec/core_functions/color/to_space/oklab/lab.hrx index f765acac0..c024bf381 100644 --- a/spec/core_functions/color/to_space/oklab/lab.hrx +++ b/spec/core_functions/color/to_space/oklab/lab.hrx @@ -52,7 +52,7 @@ a {b: color.to-space(color.change(oklab(0% -2 2), $lightness: -50%), lab)} <===> out_of_range/near/output.css a { - b: lab(133.0510823608% -24857.7899135327 55090.5043177819); + b: color-mix(in lab, color(xyz -7.6342507319 1.7017043263 -38.7847424885) 100%, black); } <===> @@ -63,7 +63,7 @@ a {b: color.to-space(oklab(50% -999999 0), lab)} <===> out_of_range/far/output.css a { - b: lab(12909434.201534431% -325857647808268600000 -13773107.564308008); + b: color-mix(in lab, color(xyz -76837326254677664 3783159310641774 5396110649242741) 100%, black); } <===> diff --git a/spec/core_functions/color/to_space/oklab/lch.hrx b/spec/core_functions/color/to_space/oklab/lch.hrx index 9ea7e3b55..f55bfef8c 100644 --- a/spec/core_functions/color/to_space/oklab/lch.hrx +++ b/spec/core_functions/color/to_space/oklab/lch.hrx @@ -52,7 +52,7 @@ a {b: color.to-space(color.change(oklab(0% -2 2), $lightness: -50%), lch)} <===> out_of_range/near/output.css a { - b: lch(133.0510823608% 60439.0054962264 114.2857209699deg); + b: color-mix(in lch, color(xyz -7.6342507319 1.7017043263 -38.7847424885) 100%, black); } <===> @@ -63,7 +63,7 @@ a {b: color.to-space(oklab(50% -999999 0), lch)} <===> out_of_range/far/output.css a { - b: lch(12909434.201534431% 325857647808268600000 180deg); + b: color-mix(in lch, color(xyz -76842638588973744 3781392309267311 5284390240038480) 100%, black); } <===> diff --git a/spec/core_functions/color/to_space/oklab/oklab.hrx b/spec/core_functions/color/to_space/oklab/oklab.hrx index 5d3a626a8..f569c6330 100644 --- a/spec/core_functions/color/to_space/oklab/oklab.hrx +++ b/spec/core_functions/color/to_space/oklab/oklab.hrx @@ -15,7 +15,7 @@ a {b: color.to-space(color.change(oklab(0% -2 2), $lightness: -50%), oklab)} <===> out_of_range/output.css a { - b: oklab(-50% -2 2); + b: color-mix(in oklab, color(xyz -7.6342507319 1.7017043263 -38.7847424885) 100%, black); } <===> diff --git a/spec/core_functions/color/to_space/oklab/oklch.hrx b/spec/core_functions/color/to_space/oklab/oklch.hrx index b474ff6b1..668db0577 100644 --- a/spec/core_functions/color/to_space/oklab/oklch.hrx +++ b/spec/core_functions/color/to_space/oklab/oklch.hrx @@ -48,7 +48,7 @@ a {b: color.to-space(color.change(oklab(0% -2 2), $lightness: -50%), oklch)} <===> out_of_range/near/output.css a { - b: oklch(-50% 2.8284271247 135deg); + b: color-mix(in oklch, color(xyz -7.6342507319 1.7017043263 -38.7847424885) 100%, black); } <===> diff --git a/spec/core_functions/color/to_space/oklch/lab.hrx b/spec/core_functions/color/to_space/oklch/lab.hrx index 0dce01bdd..8dec6f6f8 100644 --- a/spec/core_functions/color/to_space/oklch/lab.hrx +++ b/spec/core_functions/color/to_space/oklch/lab.hrx @@ -15,7 +15,7 @@ a {b: color.to-space(oklch(100% 0 0deg), lab)} <===> white/output.css a { - b: lab(100.0000005607% 0.0000001163 -0.0000141852); + b: color-mix(in lab, color(xyz 0.9504559526 1.0000000182 1.0890580001) 100%, black); } <===> @@ -59,7 +59,7 @@ a {b: color.to-space(color.change(oklch(0% 1 0deg), $lightness: -10%), lab)} <===> out_of_range/near/output.css a { - b: lab(-8.0782541499% 134.1196456989 -0.0824759946); + b: color-mix(in lab, color(xyz 0.0348582183 -0.010229465 -0.0091226442) 100%, black); } <===> @@ -70,7 +70,7 @@ a {b: color.to-space(oklch(10% 999999 0deg), lab)} <===> out_of_range/far/output.css a { - b: lab(-1245011123236616704% 5366427255548952576 6959562484441118720); + b: color-mix(in lab, color(xyz 76838084844227696 -3783161942592645 -5396112427214629) 100%, black); } <===> diff --git a/spec/core_functions/color/to_space/oklch/lch.hrx b/spec/core_functions/color/to_space/oklch/lch.hrx index 44e7075fd..36d448d47 100644 --- a/spec/core_functions/color/to_space/oklch/lch.hrx +++ b/spec/core_functions/color/to_space/oklch/lch.hrx @@ -15,7 +15,7 @@ a {b: color.to-space(oklch(100% 0 0deg), lch)} <===> white/output.css a { - b: lch(100.0000005607% 0.0000141857 270.4699000403deg); + b: color-mix(in lch, color(xyz 0.9504559526 1.0000000182 1.0890580001) 100%, black); } <===> @@ -59,7 +59,7 @@ a {b: color.to-space(color.change(oklch(0% 1 0deg), $lightness: -10%), lch)} <===> out_of_range/near/output.css a { - b: lch(-8.0782541499% 134.1196710579 359.9647663414deg); + b: color-mix(in lch, color(xyz 0.0348582183 -0.010229465 -0.0091226442) 100%, black); } <===> @@ -70,7 +70,7 @@ a {b: color.to-space(oklch(10% 999999 0deg), lch)} <===> out_of_range/far/output.css a { - b: lch(-1245011123236616704% 8788290588273632256 52.3646552277deg); + b: color-mix(in lch, color(xyz 76837027122572336 -3783130536950956 -5396126058991186) 100%, black); } <===> diff --git a/spec/core_functions/color/to_space/oklch/oklab.hrx b/spec/core_functions/color/to_space/oklch/oklab.hrx index 8190d5db5..c1d401254 100644 --- a/spec/core_functions/color/to_space/oklch/oklab.hrx +++ b/spec/core_functions/color/to_space/oklch/oklab.hrx @@ -59,7 +59,7 @@ a {b: color.to-space(color.change(oklch(0% 1 0deg), $lightness: -10%), oklab)} <===> out_of_range/near/output.css a { - b: oklab(-10% 1 0); + b: color-mix(in oklab, color(xyz 0.0348582183 -0.010229465 -0.0091226442) 100%, black); } <===> diff --git a/spec/core_functions/color/to_space/oklch/oklch.hrx b/spec/core_functions/color/to_space/oklch/oklch.hrx index e0782431c..fb94e309d 100644 --- a/spec/core_functions/color/to_space/oklch/oklch.hrx +++ b/spec/core_functions/color/to_space/oklch/oklch.hrx @@ -15,7 +15,7 @@ a {b: color.to-space(color.change(oklch(0% 1 0deg), $lightness: -10%), oklch)} <===> out_of_range/output.css a { - b: oklch(-10% 1 0deg); + b: color-mix(in oklch, color(xyz 0.0348582183 -0.010229465 -0.0091226442) 100%, black); } <===> From 2c55495d2277312333f6e4da68cd7c26b51b6b48 Mon Sep 17 00:00:00 2001 From: Natalie Weizenbaum Date: Tue, 9 Apr 2024 16:59:00 -0700 Subject: [PATCH 18/18] Update specs for clamped rgb() --- .../color/change_color/error/type.hrx | 17 ++++++++--------- spec/core_functions/color/is_in_gamut.hrx | 8 ++++---- .../color/to_space/rgb/a98_rgb.hrx | 4 ++-- .../color/to_space/rgb/display_p3.hrx | 4 ++-- spec/core_functions/color/to_space/rgb/hsl.hrx | 4 ++-- spec/core_functions/color/to_space/rgb/hwb.hrx | 4 ++-- spec/core_functions/color/to_space/rgb/lab.hrx | 4 ++-- spec/core_functions/color/to_space/rgb/lch.hrx | 4 ++-- .../core_functions/color/to_space/rgb/oklab.hrx | 4 ++-- .../core_functions/color/to_space/rgb/oklch.hrx | 4 ++-- .../color/to_space/rgb/prophoto_rgb.hrx | 4 ++-- .../color/to_space/rgb/rec2020.hrx | 4 ++-- spec/core_functions/color/to_space/rgb/rgb.hrx | 2 +- spec/core_functions/color/to_space/rgb/srgb.hrx | 4 ++-- .../color/to_space/rgb/srgb_linear.hrx | 4 ++-- spec/core_functions/color/to_space/rgb/xyz.hrx | 4 ++-- .../color/to_space/rgb/xyz_d50.hrx | 4 ++-- spec/libsass/color-functions/rgb/rgb/b.hrx | 8 ++++---- spec/libsass/color-functions/rgb/rgb/g.hrx | 8 ++++---- spec/libsass/color-functions/rgb/rgb/r.hrx | 8 ++++---- spec/libsass/color-functions/rgb/rgba/b.hrx | 8 ++++---- spec/libsass/color-functions/rgb/rgba/g.hrx | 8 ++++---- spec/libsass/color-functions/rgb/rgba/r.hrx | 8 ++++---- spec/non_conformant/colors/basic.hrx | 2 +- 24 files changed, 66 insertions(+), 67 deletions(-) diff --git a/spec/core_functions/color/change_color/error/type.hrx b/spec/core_functions/color/change_color/error/type.hrx index 96b045e32..11b12fe7a 100644 --- a/spec/core_functions/color/change_color/error/type.hrx +++ b/spec/core_functions/color/change_color/error/type.hrx @@ -15,7 +15,7 @@ Error: $color: 1 is not a color. a {b: change-color(red, $red: c)} <===> red/error -Error: $red: c is not a number. +Error: $red: c is not a number or unquoted "none". , 1 | a {b: change-color(red, $red: c)} | ^^^^^^^^^^^^^^^^^^^^^^^^^^ @@ -28,7 +28,7 @@ Error: $red: c is not a number. a {b: change-color(red, $green: c)} <===> green/error -Error: $green: c is not a number. +Error: $green: c is not a number or unquoted "none". , 1 | a {b: change-color(red, $green: c)} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ @@ -41,7 +41,7 @@ Error: $green: c is not a number. a {b: change-color(red, $blue: c)} <===> blue/error -Error: $blue: c is not a number. +Error: $blue: c is not a number or unquoted "none". , 1 | a {b: change-color(red, $blue: c)} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^ @@ -54,7 +54,7 @@ Error: $blue: c is not a number. a {b: change-color(red, $hue: c)} <===> hue/error -Error: $hue: c is not a number. +Error: $hue: c is not a number or unquoted "none". , 1 | a {b: change-color(red, $hue: c)} | ^^^^^^^^^^^^^^^^^^^^^^^^^^ @@ -67,7 +67,7 @@ Error: $hue: c is not a number. a {b: change-color(red, $saturation: c)} <===> saturation/error -Error: $saturation: c is not a number. +Error: $saturation: c is not a number or unquoted "none". , 1 | a {b: change-color(red, $saturation: c)} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ @@ -80,7 +80,7 @@ Error: $saturation: c is not a number. a {b: change-color(red, $lightness: c)} <===> lightness/error -Error: $lightness: c is not a number. +Error: $lightness: c is not a number or unquoted "none". , 1 | a {b: change-color(red, $lightness: c)} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ @@ -106,7 +106,7 @@ Error: $alpha: c is not a number. a {b: change-color(red, $blackness: c)} <===> blackness/error -Error: $blackness: c is not a number. +Error: $blackness: c is not a number or unquoted "none". , 1 | a {b: change-color(red, $blackness: c)} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ @@ -119,10 +119,9 @@ Error: $blackness: c is not a number. a {b: change-color(red, $whiteness: c)} <===> whiteness/error -Error: $whiteness: c is not a number. +Error: $whiteness: c is not a number or unquoted "none". , 1 | a {b: change-color(red, $whiteness: c)} | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ' input.scss 1:7 root stylesheet - diff --git a/spec/core_functions/color/is_in_gamut.hrx b/spec/core_functions/color/is_in_gamut.hrx index 4d93914ff..93ff599d7 100644 --- a/spec/core_functions/color/is_in_gamut.hrx +++ b/spec/core_functions/color/is_in_gamut.hrx @@ -1,6 +1,6 @@ <===> rgb/input.scss @use "sass:color"; -a {b: color.is-in-gamut(rgb(0 300 0))} +a {b: color.is-in-gamut(color.change(black, $green: 300))} <===> rgb/output.css a { @@ -11,7 +11,7 @@ a { ================================================================================ <===> rgba/input.scss @use "sass:color"; -a {b: color.is-in-gamut(rgba(-1 122 180 / 0.4))} +a {b: color.is-in-gamut(color.change(rgba(0 122 180 / 0.4), $red: -1))} <===> rgba/output.css a { @@ -22,11 +22,11 @@ a { ================================================================================ <===> hwb/input.scss @use "sass:color"; -a {b: color.is-in-gamut(hwb(0 300% 0%))} +a {b: color.is-in-gamut(hwb(0 300% -1%))} <===> hwb/output.css a { - b: true; + b: false; } <===> diff --git a/spec/core_functions/color/to_space/rgb/a98_rgb.hrx b/spec/core_functions/color/to_space/rgb/a98_rgb.hrx index ec89c733b..feed645db 100644 --- a/spec/core_functions/color/to_space/rgb/a98_rgb.hrx +++ b/spec/core_functions/color/to_space/rgb/a98_rgb.hrx @@ -55,7 +55,7 @@ a { ================================================================================ <===> out_of_range/near/input.scss @use 'sass:color'; -a {b: color.to-space(rgb(-50, 100, 400), a98-rgb)} +a {b: color.to-space(color.change(rgb(0, 100, 0), $red: -50, $blue: 400), a98-rgb)} <===> out_of_range/near/output.css a { @@ -66,7 +66,7 @@ a { ================================================================================ <===> out_of_range/far/input.scss @use 'sass:color'; -a {b: color.to-space(rgb(-999999, 0, 0), a98-rgb)} +a {b: color.to-space(color.change(black, $red: -999999), a98-rgb)} <===> out_of_range/far/output.css a { diff --git a/spec/core_functions/color/to_space/rgb/display_p3.hrx b/spec/core_functions/color/to_space/rgb/display_p3.hrx index 379927056..3e40aa8dd 100644 --- a/spec/core_functions/color/to_space/rgb/display_p3.hrx +++ b/spec/core_functions/color/to_space/rgb/display_p3.hrx @@ -55,7 +55,7 @@ a { ================================================================================ <===> out_of_range/near/input.scss @use 'sass:color'; -a {b: color.to-space(rgb(-50, 100, 400), display-p3)} +a {b: color.to-space(color.change(rgb(0, 100, 0), $red: -50, $blue: 400), display-p3)} <===> out_of_range/near/output.css a { @@ -66,7 +66,7 @@ a { ================================================================================ <===> out_of_range/far/input.scss @use 'sass:color'; -a {b: color.to-space(rgb(-999999, 0, 0), display-p3)} +a {b: color.to-space(color.change(black, $red: -999999), display-p3)} <===> out_of_range/far/output.css a { diff --git a/spec/core_functions/color/to_space/rgb/hsl.hrx b/spec/core_functions/color/to_space/rgb/hsl.hrx index d00375dde..041c0d001 100644 --- a/spec/core_functions/color/to_space/rgb/hsl.hrx +++ b/spec/core_functions/color/to_space/rgb/hsl.hrx @@ -55,7 +55,7 @@ a { ================================================================================ <===> out_of_range/near/input.scss @use 'sass:color'; -a {b: color.to-space(rgb(-50, 100, 400), hsl)} +a {b: color.to-space(color.change(rgb(0, 100, 0), $red: -50, $blue: 400), hsl)} <===> out_of_range/near/output.css a { @@ -66,7 +66,7 @@ a { ================================================================================ <===> out_of_range/far/input.scss @use 'sass:color'; -a {b: color.to-space(rgb(-999999, 0, 0), hsl)} +a {b: color.to-space(color.change(black, $red: -999999), hsl)} <===> out_of_range/far/output.css a { diff --git a/spec/core_functions/color/to_space/rgb/hwb.hrx b/spec/core_functions/color/to_space/rgb/hwb.hrx index e55ad720f..4de4725d3 100644 --- a/spec/core_functions/color/to_space/rgb/hwb.hrx +++ b/spec/core_functions/color/to_space/rgb/hwb.hrx @@ -73,7 +73,7 @@ a { <===> out_of_range/near/input.scss @use 'sass:color'; @use 'core_functions/color/utils'; -@include utils.inspect(color.to-space(rgb(-50, 100, 400), hwb)); +@include utils.inspect(color.to-space(color.change(rgb(0, 100, 0), $red: -50, $blue: 400), hwb)); <===> out_of_range/near/output.css a { @@ -87,7 +87,7 @@ a { <===> out_of_range/far/input.scss @use 'sass:color'; @use 'core_functions/color/utils'; -@include utils.inspect(color.to-space(rgb(-999999, 0, 0), hwb)); +@include utils.inspect(color.to-space(color.change(black, $red: -999999), hwb)); <===> out_of_range/far/output.css a { diff --git a/spec/core_functions/color/to_space/rgb/lab.hrx b/spec/core_functions/color/to_space/rgb/lab.hrx index efe84fec2..5aed29df8 100644 --- a/spec/core_functions/color/to_space/rgb/lab.hrx +++ b/spec/core_functions/color/to_space/rgb/lab.hrx @@ -55,7 +55,7 @@ a { ================================================================================ <===> out_of_range/near/input.scss @use 'sass:color'; -a {b: color.to-space(rgb(-50, 100, 400), lab)} +a {b: color.to-space(color.change(rgb(0, 100, 0), $red: -50, $blue: 400), lab)} <===> out_of_range/near/output.css a { @@ -70,7 +70,7 @@ a { <===> out_of_range/far/input.scss @use 'sass:color'; -a {b: color.to-space(rgb(-999999, 0, 0), lab)} +a {b: color.to-space(color.change(black, $red: -999999), lab)} <===> ================================================================================ diff --git a/spec/core_functions/color/to_space/rgb/lch.hrx b/spec/core_functions/color/to_space/rgb/lch.hrx index 2d783d21a..c5d5765c6 100644 --- a/spec/core_functions/color/to_space/rgb/lch.hrx +++ b/spec/core_functions/color/to_space/rgb/lch.hrx @@ -55,7 +55,7 @@ a { ================================================================================ <===> out_of_range/near/input.scss @use 'sass:color'; -a {b: color.to-space(rgb(-50, 100, 400), lch)} +a {b: color.to-space(color.change(rgb(0, 100, 0), $red: -50, $blue: 400), lch)} <===> out_of_range/near/output.css a { @@ -70,7 +70,7 @@ a { <===> out_of_range/far/input.scss @use 'sass:color'; -a {b: color.to-space(rgb(-999999, 0, 0), lch)} +a {b: color.to-space(color.change(black, $red: -999999), lch)} <===> ================================================================================ diff --git a/spec/core_functions/color/to_space/rgb/oklab.hrx b/spec/core_functions/color/to_space/rgb/oklab.hrx index 1bd14c453..d3fefb026 100644 --- a/spec/core_functions/color/to_space/rgb/oklab.hrx +++ b/spec/core_functions/color/to_space/rgb/oklab.hrx @@ -55,7 +55,7 @@ a { ================================================================================ <===> out_of_range/near/input.scss @use 'sass:color'; -a {b: color.to-space(rgb(-50, 100, 400), oklab)} +a {b: color.to-space(color.change(rgb(0, 100, 0), $red: -50, $blue: 400), oklab)} <===> out_of_range/near/output.css a { @@ -70,7 +70,7 @@ a { <===> out_of_range/far/input.scss @use 'sass:color'; -a {b: color.to-space(rgb(-999999, 0, 0), oklab)} +a {b: color.to-space(color.change(black, $red: -999999), oklab)} <===> ================================================================================ diff --git a/spec/core_functions/color/to_space/rgb/oklch.hrx b/spec/core_functions/color/to_space/rgb/oklch.hrx index 5c5f880c8..d1268f085 100644 --- a/spec/core_functions/color/to_space/rgb/oklch.hrx +++ b/spec/core_functions/color/to_space/rgb/oklch.hrx @@ -55,7 +55,7 @@ a { ================================================================================ <===> out_of_range/near/input.scss @use 'sass:color'; -a {b: color.to-space(rgb(-50, 100, 400), oklch)} +a {b: color.to-space(color.change(rgb(0, 100, 0), $red: -50, $blue: 400), oklch)} <===> out_of_range/near/output.css a { @@ -70,7 +70,7 @@ a { <===> out_of_range/far/input.scss @use 'sass:color'; -a {b: color.to-space(rgb(-999999, 0, 0), oklch)} +a {b: color.to-space(color.change(black, $red: -999999), oklch)} <===> ================================================================================ diff --git a/spec/core_functions/color/to_space/rgb/prophoto_rgb.hrx b/spec/core_functions/color/to_space/rgb/prophoto_rgb.hrx index eb60bb275..6196932c4 100644 --- a/spec/core_functions/color/to_space/rgb/prophoto_rgb.hrx +++ b/spec/core_functions/color/to_space/rgb/prophoto_rgb.hrx @@ -55,7 +55,7 @@ a { ================================================================================ <===> out_of_range/near/input.scss @use 'sass:color'; -a {b: color.to-space(rgb(-50, 100, 400), prophoto-rgb)} +a {b: color.to-space(color.change(rgb(0, 100, 0), $red: -50, $blue: 400), prophoto-rgb)} <===> out_of_range/near/output.css a { @@ -66,7 +66,7 @@ a { ================================================================================ <===> out_of_range/far/input.scss @use 'sass:color'; -a {b: color.to-space(rgb(-999999, 0, 0), prophoto-rgb)} +a {b: color.to-space(color.change(black, $red: -999999), prophoto-rgb)} <===> out_of_range/far/output.css a { diff --git a/spec/core_functions/color/to_space/rgb/rec2020.hrx b/spec/core_functions/color/to_space/rgb/rec2020.hrx index 00015992e..0728381f7 100644 --- a/spec/core_functions/color/to_space/rgb/rec2020.hrx +++ b/spec/core_functions/color/to_space/rgb/rec2020.hrx @@ -55,7 +55,7 @@ a { ================================================================================ <===> out_of_range/near/input.scss @use 'sass:color'; -a {b: color.to-space(rgb(-50, 100, 400), rec2020)} +a {b: color.to-space(color.change(rgb(0, 100, 0), $red: -50, $blue: 400), rec2020)} <===> out_of_range/near/output.css a { @@ -66,7 +66,7 @@ a { ================================================================================ <===> out_of_range/far/input.scss @use 'sass:color'; -a {b: color.to-space(rgb(-999999, 0, 0), rec2020)} +a {b: color.to-space(color.change(black, $red: -999999), rec2020)} <===> out_of_range/far/output.css a { diff --git a/spec/core_functions/color/to_space/rgb/rgb.hrx b/spec/core_functions/color/to_space/rgb/rgb.hrx index e07a670c9..1974692a3 100644 --- a/spec/core_functions/color/to_space/rgb/rgb.hrx +++ b/spec/core_functions/color/to_space/rgb/rgb.hrx @@ -11,7 +11,7 @@ a { ================================================================================ <===> out_of_range/input.scss @use 'sass:color'; -a {b: color.to-space(rgb(-50, 100, 400), rgb)} +a {b: color.to-space(color.change(rgb(0, 100, 0), $red: -50, $blue: 400), rgb)} <===> out_of_range/output.css a { diff --git a/spec/core_functions/color/to_space/rgb/srgb.hrx b/spec/core_functions/color/to_space/rgb/srgb.hrx index 94b0a76c5..06dec2742 100644 --- a/spec/core_functions/color/to_space/rgb/srgb.hrx +++ b/spec/core_functions/color/to_space/rgb/srgb.hrx @@ -55,7 +55,7 @@ a { ================================================================================ <===> out_of_range/near/input.scss @use 'sass:color'; -a {b: color.to-space(rgb(-50, 100, 400), srgb)} +a {b: color.to-space(color.change(rgb(0, 100, 0), $red: -50, $blue: 400), srgb)} <===> out_of_range/near/output.css a { @@ -66,7 +66,7 @@ a { ================================================================================ <===> out_of_range/far/input.scss @use 'sass:color'; -a {b: color.to-space(rgb(-999999, 0, 0), srgb)} +a {b: color.to-space(color.change(black, $red: -999999), srgb)} <===> out_of_range/far/output.css a { diff --git a/spec/core_functions/color/to_space/rgb/srgb_linear.hrx b/spec/core_functions/color/to_space/rgb/srgb_linear.hrx index a19f6b487..d3864f33a 100644 --- a/spec/core_functions/color/to_space/rgb/srgb_linear.hrx +++ b/spec/core_functions/color/to_space/rgb/srgb_linear.hrx @@ -55,7 +55,7 @@ a { ================================================================================ <===> out_of_range/near/input.scss @use 'sass:color'; -a {b: color.to-space(rgb(-50, 100, 400), srgb-linear)} +a {b: color.to-space(color.change(rgb(0, 100, 0), $red: -50, $blue: 400), srgb-linear)} <===> out_of_range/near/output.css a { @@ -66,7 +66,7 @@ a { ================================================================================ <===> out_of_range/far/input.scss @use 'sass:color'; -a {b: color.to-space(rgb(-999999, 0, 0), srgb-linear)} +a {b: color.to-space(color.change(black, $red: -999999), srgb-linear)} <===> out_of_range/far/output.css a { diff --git a/spec/core_functions/color/to_space/rgb/xyz.hrx b/spec/core_functions/color/to_space/rgb/xyz.hrx index 6758a1e2f..f40a1dc00 100644 --- a/spec/core_functions/color/to_space/rgb/xyz.hrx +++ b/spec/core_functions/color/to_space/rgb/xyz.hrx @@ -55,7 +55,7 @@ a { ================================================================================ <===> out_of_range/near/input.scss @use 'sass:color'; -a {b: color.to-space(rgb(-50, 100, 400), xyz)} +a {b: color.to-space(color.change(rgb(0, 100, 0), $red: -50, $blue: 400), xyz)} <===> out_of_range/near/output.css a { @@ -66,7 +66,7 @@ a { ================================================================================ <===> out_of_range/far/input.scss @use 'sass:color'; -a {b: color.to-space(rgb(-999999, 0, 0), xyz)} +a {b: color.to-space(color.change(black, $red: -999999), xyz)} <===> out_of_range/far/output.css a { diff --git a/spec/core_functions/color/to_space/rgb/xyz_d50.hrx b/spec/core_functions/color/to_space/rgb/xyz_d50.hrx index e6bdf7853..65b7028aa 100644 --- a/spec/core_functions/color/to_space/rgb/xyz_d50.hrx +++ b/spec/core_functions/color/to_space/rgb/xyz_d50.hrx @@ -55,7 +55,7 @@ a { ================================================================================ <===> out_of_range/near/input.scss @use 'sass:color'; -a {b: color.to-space(rgb(-50, 100, 400), xyz-d50)} +a {b: color.to-space(color.change(rgb(0, 100, 0), $red: -50, $blue: 400), xyz-d50)} <===> out_of_range/near/output.css a { @@ -66,7 +66,7 @@ a { ================================================================================ <===> out_of_range/far/input.scss @use 'sass:color'; -a {b: color.to-space(rgb(-999999, 0, 0), xyz-d50)} +a {b: color.to-space(color.change(black, $red: -999999), xyz-d50)} <===> out_of_range/far/output.css a { diff --git a/spec/libsass/color-functions/rgb/rgb/b.hrx b/spec/libsass/color-functions/rgb/rgb/b.hrx index 76c94c4e9..04fc42ebe 100644 --- a/spec/libsass/color-functions/rgb/rgb/b.hrx +++ b/spec/libsass/color-functions/rgb/rgb/b.hrx @@ -368,7 +368,7 @@ foo { <===> output.css foo { - c-1: hsl(240, 100%, -0.1960784314%); + c-1: rgb(0, 0, 0); c0: rgb(0, 0, 0); c1: rgb(0, 0, 1); c2: rgb(0, 0, 2); @@ -625,11 +625,11 @@ foo { c253: rgb(0, 0, 253); c254: rgb(0, 0, 254); c255: rgb(0, 0, 255); - c256: hsl(240, 100.7874015748%, 50.1960784314%); + c256: rgb(0, 0, 255); } foo { - c-1: hsl(240, 100%, -0.5%); + c-1: rgb(0, 0, 0); c0: rgb(0, 0, 0); c1: rgb(0, 0, 2.55); c2: rgb(0, 0, 5.1); @@ -731,5 +731,5 @@ foo { c98: rgb(0, 0, 249.9); c99: rgb(0, 0, 252.45); c100: rgb(0, 0, 255); - c101: hsl(240, 102.0202020202%, 50.5%); + c101: rgb(0, 0, 255); } diff --git a/spec/libsass/color-functions/rgb/rgb/g.hrx b/spec/libsass/color-functions/rgb/rgb/g.hrx index 76a788de9..c9326912f 100644 --- a/spec/libsass/color-functions/rgb/rgb/g.hrx +++ b/spec/libsass/color-functions/rgb/rgb/g.hrx @@ -368,7 +368,7 @@ foo { <===> output.css foo { - c-1: hsl(120, 100%, -0.1960784314%); + c-1: rgb(0, 0, 0); c0: rgb(0, 0, 0); c1: rgb(0, 1, 0); c2: rgb(0, 2, 0); @@ -625,11 +625,11 @@ foo { c253: rgb(0, 253, 0); c254: rgb(0, 254, 0); c255: rgb(0, 255, 0); - c256: hsl(120, 100.7874015748%, 50.1960784314%); + c256: rgb(0, 255, 0); } foo { - c-1: hsl(120, 100%, -0.5%); + c-1: rgb(0, 0, 0); c0: rgb(0, 0, 0); c1: rgb(0, 2.55, 0); c2: rgb(0, 5.1, 0); @@ -731,5 +731,5 @@ foo { c98: rgb(0, 249.9, 0); c99: rgb(0, 252.45, 0); c100: rgb(0, 255, 0); - c101: hsl(120, 102.0202020202%, 50.5%); + c101: rgb(0, 255, 0); } diff --git a/spec/libsass/color-functions/rgb/rgb/r.hrx b/spec/libsass/color-functions/rgb/rgb/r.hrx index 79c6ee6d0..2f28b4a41 100644 --- a/spec/libsass/color-functions/rgb/rgb/r.hrx +++ b/spec/libsass/color-functions/rgb/rgb/r.hrx @@ -368,7 +368,7 @@ foo { <===> output.css foo { - c-1: hsl(120, 100%, -0.1960784314%); + c-1: rgb(0, 0, 0); c0: rgb(0, 0, 0); c1: rgb(0, 1, 0); c2: rgb(0, 2, 0); @@ -625,11 +625,11 @@ foo { c253: rgb(0, 253, 0); c254: rgb(0, 254, 0); c255: rgb(0, 255, 0); - c256: hsl(120, 100.7874015748%, 50.1960784314%); + c256: rgb(0, 255, 0); } foo { - c-1: hsl(0, 100%, -0.5%); + c-1: rgb(0, 0, 0); c0: rgb(0, 0, 0); c1: rgb(2.55, 0, 0); c2: rgb(5.1, 0, 0); @@ -731,5 +731,5 @@ foo { c98: rgb(249.9, 0, 0); c99: rgb(252.45, 0, 0); c100: rgb(255, 0, 0); - c101: hsl(0, 102.0202020202%, 50.5%); + c101: rgb(255, 0, 0); } diff --git a/spec/libsass/color-functions/rgb/rgba/b.hrx b/spec/libsass/color-functions/rgb/rgba/b.hrx index dd6243cf4..2e4508a80 100644 --- a/spec/libsass/color-functions/rgb/rgba/b.hrx +++ b/spec/libsass/color-functions/rgb/rgba/b.hrx @@ -368,7 +368,7 @@ foo { <===> output.css foo { - c-1: hsl(240, 100%, -0.1960784314%); + c-1: rgb(0, 0, 0); c0: rgb(0, 0, 0); c1: rgb(0, 0, 1); c2: rgb(0, 0, 2); @@ -625,11 +625,11 @@ foo { c253: rgb(0, 0, 253); c254: rgb(0, 0, 254); c255: rgb(0, 0, 255); - c256: hsl(240, 100.7874015748%, 50.1960784314%); + c256: rgb(0, 0, 255); } foo { - c-1: hsl(240, 100%, -0.5%); + c-1: rgb(0, 0, 0); c0: rgb(0, 0, 0); c1: rgb(0, 0, 2.55); c2: rgb(0, 0, 5.1); @@ -731,5 +731,5 @@ foo { c98: rgb(0, 0, 249.9); c99: rgb(0, 0, 252.45); c100: rgb(0, 0, 255); - c101: hsl(240, 102.0202020202%, 50.5%); + c101: rgb(0, 0, 255); } diff --git a/spec/libsass/color-functions/rgb/rgba/g.hrx b/spec/libsass/color-functions/rgb/rgba/g.hrx index 05a6cf09d..2036c8091 100644 --- a/spec/libsass/color-functions/rgb/rgba/g.hrx +++ b/spec/libsass/color-functions/rgb/rgba/g.hrx @@ -368,7 +368,7 @@ foo { <===> output.css foo { - c-1: hsl(120, 100%, -0.1960784314%); + c-1: rgb(0, 0, 0); c0: rgb(0, 0, 0); c1: rgb(0, 1, 0); c2: rgb(0, 2, 0); @@ -625,11 +625,11 @@ foo { c253: rgb(0, 253, 0); c254: rgb(0, 254, 0); c255: rgb(0, 255, 0); - c256: hsl(120, 100.7874015748%, 50.1960784314%); + c256: rgb(0, 255, 0); } foo { - c-1: hsl(120, 100%, -0.5%); + c-1: rgb(0, 0, 0); c0: rgb(0, 0, 0); c1: rgb(0, 2.55, 0); c2: rgb(0, 5.1, 0); @@ -731,5 +731,5 @@ foo { c98: rgb(0, 249.9, 0); c99: rgb(0, 252.45, 0); c100: rgb(0, 255, 0); - c101: hsl(120, 102.0202020202%, 50.5%); + c101: rgb(0, 255, 0); } diff --git a/spec/libsass/color-functions/rgb/rgba/r.hrx b/spec/libsass/color-functions/rgb/rgba/r.hrx index cd32932bf..305608c65 100644 --- a/spec/libsass/color-functions/rgb/rgba/r.hrx +++ b/spec/libsass/color-functions/rgb/rgba/r.hrx @@ -368,7 +368,7 @@ foo { <===> output.css foo { - c-1: hsl(120, 100%, -0.1960784314%); + c-1: rgb(0, 0, 0); c0: rgb(0, 0, 0); c1: rgb(0, 1, 0); c2: rgb(0, 2, 0); @@ -625,11 +625,11 @@ foo { c253: rgb(0, 253, 0); c254: rgb(0, 254, 0); c255: rgb(0, 255, 0); - c256: hsl(120, 100.7874015748%, 50.1960784314%); + c256: rgb(0, 255, 0); } foo { - c-1: hsl(0, 100%, -0.5%); + c-1: rgb(0, 0, 0); c0: rgb(0, 0, 0); c1: rgb(2.55, 0, 0); c2: rgb(5.1, 0, 0); @@ -731,5 +731,5 @@ foo { c98: rgb(249.9, 0, 0); c99: rgb(252.45, 0, 0); c100: rgb(255, 0, 0); - c101: hsl(0, 102.0202020202%, 50.5%); + c101: rgb(255, 0, 0); } diff --git a/spec/non_conformant/colors/basic.hrx b/spec/non_conformant/colors/basic.hrx index a79f20723..8d0d96a38 100644 --- a/spec/non_conformant/colors/basic.hrx +++ b/spec/non_conformant/colors/basic.hrx @@ -14,5 +14,5 @@ p { color: red green blue; color: redhux; color: redgreen; - foo: hsl(13.1049250535, 189.0688259109%, 124.2156862745%); + foo: rgb(200, 255, 255); }