From e95562a65d1b5c49dbfda7bb5601029af1771f00 Mon Sep 17 00:00:00 2001 From: Natalie Weizenbaum Date: Wed, 17 Jul 2024 18:21:45 -0700 Subject: [PATCH] [Color 4] Add tests to match updated spec (#1995) --- .../color/adjust/error/missing.hrx | 67 ++++ spec/core_functions/color/adjust/space.hrx | 147 +++++++- spec/core_functions/color/adjust_hue.hrx | 13 + spec/core_functions/color/alpha.hrx | 14 + spec/core_functions/color/blackness.hrx | 14 + spec/core_functions/color/blue.hrx | 14 + .../color/change/no_channels.hrx | 19 -- .../core_functions/color/change/none_case.hrx | 30 -- spec/core_functions/color/change/space.hrx | 228 +++++++++++++ .../core_functions/color/color/degenerate.hrx | 87 +++++ spec/core_functions/color/complement.hrx | 242 ++++++++++++- spec/core_functions/color/darken.hrx | 13 + spec/core_functions/color/desaturate.hrx | 13 + spec/core_functions/color/fade_in.hrx | 13 + spec/core_functions/color/fade_out.hrx | 13 + spec/core_functions/color/grayscale.hrx | 59 +++- spec/core_functions/color/green.hrx | 14 + .../color/hsl/four_args/clamped.hrx | 42 --- .../color/hsl/four_args/out_of_gamut.hrx | 235 +++++++++++++ spec/core_functions/color/hue.hrx | 14 + spec/core_functions/color/hwb/four_args.hrx | 132 ++++++++ spec/core_functions/color/invert/error.hrx | 132 ++++++++ spec/core_functions/color/invert/legacy.hrx | 66 +++- spec/core_functions/color/invert/modern.hrx | 33 ++ spec/core_functions/color/lab/alpha.hrx | 39 +++ spec/core_functions/color/lab/no_alpha.hrx | 117 +++++++ spec/core_functions/color/lch/alpha.hrx | 39 +++ spec/core_functions/color/lch/no_alpha.hrx | 117 +++++++ spec/core_functions/color/lighten.hrx | 13 + spec/core_functions/color/lightness.hrx | 14 + .../color/mix/hue_interpolation.hrx | 106 +++++- spec/core_functions/color/mix/missing.hrx | 231 +++++++++++++ spec/core_functions/color/oklab/alpha.hrx | 39 +++ spec/core_functions/color/oklab/no_alpha.hrx | 117 +++++++ spec/core_functions/color/oklch/alpha.hrx | 39 +++ spec/core_functions/color/oklch/no_alpha.hrx | 117 +++++++ spec/core_functions/color/red.hrx | 14 + .../color/rgb/four_args/clamped.hrx | 131 ++++++- spec/core_functions/color/saturate.hrx | 13 + spec/core_functions/color/saturation.hrx | 14 + .../color/scale/error/missing.hrx | 39 +++ .../color/scale/no_channels.hrx | 11 + spec/core_functions/color/scale/space.hrx | 99 ++++++ spec/core_functions/color/to_gamut/space.hrx | 320 ++++++++++++++++++ spec/core_functions/color/whiteness.hrx | 14 + 45 files changed, 3176 insertions(+), 121 deletions(-) create mode 100644 spec/core_functions/color/adjust/error/missing.hrx delete mode 100644 spec/core_functions/color/change/no_channels.hrx delete mode 100644 spec/core_functions/color/change/none_case.hrx create mode 100644 spec/core_functions/color/change/space.hrx create mode 100644 spec/core_functions/color/color/degenerate.hrx delete mode 100644 spec/core_functions/color/hsl/four_args/clamped.hrx create mode 100644 spec/core_functions/color/hsl/four_args/out_of_gamut.hrx create mode 100644 spec/core_functions/color/mix/missing.hrx create mode 100644 spec/core_functions/color/scale/error/missing.hrx diff --git a/spec/core_functions/color/adjust/error/missing.hrx b/spec/core_functions/color/adjust/error/missing.hrx new file mode 100644 index 0000000000..d161d5ab9e --- /dev/null +++ b/spec/core_functions/color/adjust/error/missing.hrx @@ -0,0 +1,67 @@ +<===> legacy/input.scss +@use 'sass:color'; +a {b: color.adjust(rgb(none 0 0), $red: 10)} + +<===> legacy/error +Error: $red: Because the CSS working group is still deciding on the best behavior, Sass doesn't currently support modifying missing channels (color: rgb(none 0 0)). + , +2 | a {b: color.adjust(rgb(none 0 0), $red: 10)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> modern/input.scss +@use 'sass:color'; +a {b: color.adjust(lab(none 0 0), $lightness: 10%)} + +<===> modern/error +Error: $lightness: Because the CSS working group is still deciding on the best behavior, Sass doesn't currently support modifying missing channels (color: lab(none 0 0)). + , +2 | a {b: color.adjust(lab(none 0 0), $lightness: 10%)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> powerless/legacy/input.scss +@use 'sass:color'; +a {b: color.adjust(grey, $hue: 10deg, $space: hsl)} + +<===> powerless/legacy/error +Error: $hue: Because the CSS working group is still deciding on the best behavior, Sass doesn't currently support modifying missing channels (color: hsl(none 0% 50.1960784314%)). + , +2 | a {b: color.adjust(grey, $hue: 10deg, $space: hsl)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> powerless/modern/input.scss +@use 'sass:color'; +a {b: color.adjust(grey, $hue: 10deg, $space: lch)} + +<===> powerless/modern/error +Error: $hue: Because the CSS working group is still deciding on the best behavior, Sass doesn't currently support modifying missing channels (color: lch(53.5850134522% 0 none)). + , +2 | a {b: color.adjust(grey, $hue: 10deg, $space: lch)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> alpha/input.scss +@use 'sass:color'; +a {b: color.adjust(rgb(0 0 0 / none), $alpha: 0.1)} + +<===> alpha/error +Error: $alpha: Because the CSS working group is still deciding on the best behavior, Sass doesn't currently support modifying missing channels (color: rgb(0 0 0 / none)). + , +2 | a {b: color.adjust(rgb(0 0 0 / none), $alpha: 0.1)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet diff --git a/spec/core_functions/color/adjust/space.hrx b/spec/core_functions/color/adjust/space.hrx index e94266928d..878ed33600 100644 --- a/spec/core_functions/color/adjust/space.hrx +++ b/spec/core_functions/color/adjust/space.hrx @@ -1,8 +1,151 @@ -<===> input.scss +<===> identical/input.scss +@use 'sass:color'; +a {b: color.adjust(oklch(50% 0.2 0deg), $space: lab)} + +<===> identical/output.css +a { + b: oklch(50% 0.2 0deg); +} + +<===> +================================================================================ +<===> legacy/to_legacy/input.scss +@use 'sass:color'; +a {b: color.adjust(pink, $saturation: -5%, $space: hsl)} + +<===> legacy/to_legacy/output.css +a { + b: rgb(253.425, 193.575, 204.025); +} + +<===> +================================================================================ +<===> legacy/to_modern/input.scss @use 'sass:color'; a {b: color.adjust(pink, $chroma: -0.01, $space: oklch)} -<===> output.css +<===> legacy/to_modern/output.css a { b: rgb(249.5073873455, 194.8272088475, 204.1290090118); } + +<===> +================================================================================ +<===> modern/to_legacy/input.scss +@use 'sass:color'; +a {b: color.adjust(lab(50% 10 -20), $saturation: 5%, $space: hsl)} + +<===> modern/to_legacy/output.css +a { + b: lab(48.2797960499% 13.4192461856 -26.2119638245); +} + +<===> +================================================================================ +<===> modern/to_modern/input.scss +@use 'sass:color'; +a {b: color.adjust(lab(50% 10 -20), $chroma: 0.01, $space: oklch)} + +<===> modern/to_modern/output.css +a { + b: lab(49.8635566117% 11.8934236813 -23.2342925555); +} + +<===> +================================================================================ +<===> powerless/legacy/input.scss +@use 'sass:color'; +a {b: color.adjust(hsl(0deg 0% 50%), $space: lab)} + +<===> powerless/legacy/output.css +a { + b: hsl(0, 0%, 50%); +} + +<===> +================================================================================ +<===> powerless/modern/input.scss +@use 'sass:color'; +a {b: color.adjust(oklch(50% 0 0deg), $space: lab)} + +<===> powerless/modern/output.css +a { + b: oklch(50% 0 none); +} + +<===> +================================================================================ +<===> missing/legacy/same/implicit/input.scss +@use 'sass:color'; +a {b: color.adjust(rgb(none none none))} + +<===> missing/legacy/same/implicit/output.css +a { + b: rgb(none none none); +} + +<===> +================================================================================ +<===> missing/legacy/same/explicit/input.scss +@use 'sass:color'; +a {b: color.adjust(rgb(none none none), $space: rgb)} + +<===> missing/legacy/same/explicit/output.css +a { + b: rgb(none none none); +} + +<===> +================================================================================ +<===> missing/legacy/analogous/legacy/input.scss +@use 'sass:color'; +a {b: color.adjust(hsl(none 50% 50%), $space: hwb)} + +<===> missing/legacy/analogous/legacy/output.css +a { + b: hsl(0, 50%, 50%); +} + +<===> +================================================================================ +<===> missing/legacy/analogous/modern/input.scss +@use 'sass:color'; +a {b: color.adjust(rgb(none none none), $space: display-p3)} + +<===> missing/legacy/analogous/modern/output.css +a { + b: black; +} + +<===> +================================================================================ +<===> missing/modern/same/implicit/input.scss +@use 'sass:color'; +a {b: color.adjust(color(srgb none none none))} + +<===> missing/modern/same/implicit/output.css +a { + b: color(srgb none none none); +} + +<===> +================================================================================ +<===> missing/modern/same/explicit/input.scss +@use 'sass:color'; +a {b: color.adjust(color(srgb none none none), $space: srgb)} + +<===> missing/modern/same/explicit/output.css +a { + b: color(srgb none none none); +} + +<===> +================================================================================ +<===> missing/modern/analogous/input.scss +@use 'sass:color'; +a {b: color.adjust(color(srgb none none none), $space: display-p3)} + +<===> missing/modern/analogous/output.css +a { + b: color(srgb none none none); +} diff --git a/spec/core_functions/color/adjust_hue.hrx b/spec/core_functions/color/adjust_hue.hrx index 87c1bd6116..a97d14f1f2 100644 --- a/spec/core_functions/color/adjust_hue.hrx +++ b/spec/core_functions/color/adjust_hue.hrx @@ -343,3 +343,16 @@ Error: $degrees: blue is not a number. | ^^^^^^^^^^^^^^^^^^^^^ ' input.scss 1:7 root stylesheet + +<===> +================================================================================ +<===> error/non_legacy/input.scss +a {b: adjust-hue(lch(0% 0 0deg), 10deg)} + +<===> error/non_legacy/error +Error: adjust-hue() is only supported for legacy colors. Please use color.adjust() instead with an explicit $space argument. + , +1 | a {b: adjust-hue(lch(0% 0 0deg), 10deg)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 1:7 root stylesheet diff --git a/spec/core_functions/color/alpha.hrx b/spec/core_functions/color/alpha.hrx index 0f1d9a97a3..30f1ca4482 100644 --- a/spec/core_functions/color/alpha.hrx +++ b/spec/core_functions/color/alpha.hrx @@ -217,3 +217,17 @@ Error: $color: 1=c is not a color. | ^^^^^^^^^^^^^^^^^^^^^ ' input.scss 1:7 root stylesheet + +<===> +================================================================================ +<===> error/non_legacy/input.scss +@use 'sass:color'; +a {b: color.alpha(color(srgb 1 1 1))} + +<===> error/non_legacy/error +Error: color.alpha() is only supported for legacy colors. Please use color.channel() instead. + , +2 | a {b: color.alpha(color(srgb 1 1 1))} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet diff --git a/spec/core_functions/color/blackness.hrx b/spec/core_functions/color/blackness.hrx index 4a5cde2c07..2307234373 100644 --- a/spec/core_functions/color/blackness.hrx +++ b/spec/core_functions/color/blackness.hrx @@ -213,3 +213,17 @@ Error: $color: 1 is not a color. | ^^^^^^^^^^^^^^^^^^ ' input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> error/non_legacy/input.scss +@use 'sass:color'; +a {b: color.blackness(color(srgb 1 1 1))} + +<===> error/non_legacy/error +Error: color.blackness() is only supported for legacy colors. Please use color.channel() instead with an explicit $space argument. + , +2 | a {b: color.blackness(color(srgb 1 1 1))} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet diff --git a/spec/core_functions/color/blue.hrx b/spec/core_functions/color/blue.hrx index de497d03b6..f2111b37f8 100644 --- a/spec/core_functions/color/blue.hrx +++ b/spec/core_functions/color/blue.hrx @@ -134,3 +134,17 @@ Error: $color: 1 is not a color. | ^^^^^^^ ' input.scss 1:7 root stylesheet + +<===> +================================================================================ +<===> error/non_legacy/input.scss +@use 'sass:color'; +a {b: color.blue(color(srgb 1 1 1))} + +<===> error/non_legacy/error +Error: color.blue() is only supported for legacy colors. Please use color.channel() instead with an explicit $space argument. + , +2 | a {b: color.blue(color(srgb 1 1 1))} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet diff --git a/spec/core_functions/color/change/no_channels.hrx b/spec/core_functions/color/change/no_channels.hrx deleted file mode 100644 index f59b2e6437..0000000000 --- a/spec/core_functions/color/change/no_channels.hrx +++ /dev/null @@ -1,19 +0,0 @@ -<===> identical/input.scss -@use 'sass:color'; -a {b: color.change(oklch(50% 0.2 0deg), $space: lab)} - -<===> identical/output.css -a { - b: oklch(50% 0.2 0deg); -} - -<===> -================================================================================ -<===> powerless/input.scss -@use 'sass:color'; -a {b: color.change(oklch(50% 0 0deg), $space: lab)} - -<===> powerless/output.css -a { - b: oklch(50% 0 none); -} diff --git a/spec/core_functions/color/change/none_case.hrx b/spec/core_functions/color/change/none_case.hrx deleted file mode 100644 index 2f5d1bbf43..0000000000 --- a/spec/core_functions/color/change/none_case.hrx +++ /dev/null @@ -1,30 +0,0 @@ -<===> legacy/input.scss -@use 'sass:color'; -a {b: color.change(red, $blue: NoNe)} - -<===> legacy/output.css -a { - b: rgb(255 0 none); -} - -<===> -================================================================================ -<===> non_legacy/input.scss -@use 'sass:color'; -a {b: color.change(lab(50% 10 20), $a: nOnE)} - -<===> non_legacy/output.css -a { - b: lab(50% none 20); -} - -<===> -================================================================================ -<===> alpha/input.scss -@use 'sass:color'; -a {b: color.change(red, $alpha: NONE)} - -<===> alpha/output.css -a { - b: rgb(255 0 0 / none); -} diff --git a/spec/core_functions/color/change/space.hrx b/spec/core_functions/color/change/space.hrx new file mode 100644 index 0000000000..2028be2df6 --- /dev/null +++ b/spec/core_functions/color/change/space.hrx @@ -0,0 +1,228 @@ +<===> identical/input.scss +@use 'sass:color'; +a {b: color.change(oklch(50% 0.2 0deg), $space: lab)} + +<===> identical/output.css +a { + b: oklch(50% 0.2 0deg); +} + +<===> +================================================================================ +<===> legacy/to_legacy/input.scss +@use 'sass:color'; +a {b: color.change(pink, $saturation: 5%, $space: hsl)} + +<===> legacy/to_legacy/output.css +a { + b: rgb(225.075, 221.925, 222.475); +} + +<===> +================================================================================ +<===> legacy/to_modern/input.scss +@use 'sass:color'; +a {b: color.change(pink, $chroma: 0.01, $space: oklch)} + +<===> legacy/to_modern/output.css +a { + b: rgb(217.7587670223, 208.8497864408, 210.1600909257); +} + +<===> +================================================================================ +<===> modern/to_legacy/input.scss +@use 'sass:color'; +a {b: color.change(lab(50% 10 -20), $saturation: 5%, $space: hsl)} + +<===> modern/to_legacy/output.css +a { + b: lab(53.9442763509% 2.9406893179 -6.1872703789); +} + +<===> +================================================================================ +<===> modern/to_modern/input.scss +@use 'sass:color'; +a {b: color.change(lab(50% 10 -20), $chroma: 0.01, $space: oklch)} + +<===> modern/to_modern/output.css +a { + b: lab(50.5994457353% 1.499908117 -3.4111247636); +} + +<===> +================================================================================ +<===> powerless/legacy/input.scss +@use 'sass:color'; +a {b: color.change(hsl(0deg 0% 50%), $space: lab)} + +<===> powerless/legacy/output.css +a { + b: hsl(0, 0%, 50%); +} + +<===> +================================================================================ +<===> powerless/modern/input.scss +@use 'sass:color'; +a {b: color.change(oklch(50% 0 0deg), $space: lab)} + +<===> powerless/modern/output.css +a { + b: oklch(50% 0 none); +} + +<===> +================================================================================ +<===> missing/arg/legacy/same/implicit/input.scss +@use 'sass:color'; +a {b: color.change(pink, $red: none)} + +<===> missing/arg/legacy/same/implicit/output.css +a { + b: rgb(none 192 203); +} + +<===> +================================================================================ +<===> missing/arg/legacy/same/explicit/input.scss +@use 'sass:color'; +a {b: color.change(pink, $red: none, $space: rgb)} + +<===> missing/arg/legacy/same/explicit/output.css +a { + b: rgb(none 192 203); +} + +<===> +================================================================================ +<===> missing/arg/legacy/analogous/legacy/input.scss +@use 'sass:color'; +a {b: color.change(hsl(100deg 50% 50%), $hue: none, $space: hwb)} + +<===> missing/arg/legacy/analogous/legacy/output.css +a { + b: hsl(0, 50%, 50%); +} + +<===> +================================================================================ +<===> missing/arg/legacy/analogous/modern/input.scss +@use 'sass:color'; +a {b: color.change(pink, $red: none, $space: display-p3)} + +<===> missing/arg/legacy/analogous/modern/output.css +a { + b: rgb(0, 198.1453699836, 205.7002828396); +} + +<===> +================================================================================ +<===> missing/arg/modern/same/implicit/input.scss +@use 'sass:color'; +a {b: color.change(color(srgb 0.1 0.2 0.3), $red: none)} + +<===> missing/arg/modern/same/implicit/output.css +a { + b: color(srgb none 0.2 0.3); +} + +<===> +================================================================================ +<===> missing/arg/modern/same/explicit/input.scss +@use 'sass:color'; +a {b: color.change(color(srgb 0.1 0.2 0.3), $red: none, $space: srgb)} + +<===> missing/arg/modern/same/explicit/output.css +a { + b: color(srgb none 0.2 0.3); +} + +<===> +================================================================================ +<===> missing/arg/modern/analogous/input.scss +@use 'sass:color'; +a {b: color.change(color(srgb 0.1 0.2 0.3), $red: none, $space: display-p3)} + +<===> missing/arg/modern/analogous/output.css +a { + b: color(srgb none 0.2018961688 0.3005594241); +} + +<===> +================================================================================ +<===> missing/color/legacy/same/implicit/input.scss +@use 'sass:color'; +a {b: color.change(rgb(none none none))} + +<===> missing/color/legacy/same/implicit/output.css +a { + b: rgb(none none none); +} + +<===> +================================================================================ +<===> missing/color/legacy/same/explicit/input.scss +@use 'sass:color'; +a {b: color.change(rgb(none none none), $space: rgb)} + +<===> missing/color/legacy/same/explicit/output.css +a { + b: rgb(none none none); +} + +<===> +================================================================================ +<===> missing/color/legacy/analogous/legacy/input.scss +@use 'sass:color'; +a {b: color.change(hsl(none 50% 50%), $space: hwb)} + +<===> missing/color/legacy/analogous/legacy/output.css +a { + b: hsl(0, 50%, 50%); +} + +<===> +================================================================================ +<===> missing/color/legacy/analogous/modern/input.scss +@use 'sass:color'; +a {b: color.change(rgb(none none none), $space: display-p3)} + +<===> missing/color/legacy/analogous/modern/output.css +a { + b: black; +} + +<===> +================================================================================ +<===> missing/color/modern/same/implicit/input.scss +@use 'sass:color'; +a {b: color.change(color(srgb none none none))} + +<===> missing/color/modern/same/implicit/output.css +a { + b: color(srgb none none none); +} + +<===> +================================================================================ +<===> missing/color/modern/same/explicit/input.scss +@use 'sass:color'; +a {b: color.change(color(srgb none none none), $space: srgb)} + +<===> missing/color/modern/same/explicit/output.css +a { + b: color(srgb none none none); +} + +<===> +================================================================================ +<===> missing/color/modern/analogous/input.scss +@use 'sass:color'; +a {b: color.change(color(srgb none none none), $space: display-p3)} + +<===> missing/color/modern/analogous/output.css +a { + b: color(srgb none none none); +} diff --git a/spec/core_functions/color/color/degenerate.hrx b/spec/core_functions/color/color/degenerate.hrx new file mode 100644 index 0000000000..0f2d8b88bc --- /dev/null +++ b/spec/core_functions/color/color/degenerate.hrx @@ -0,0 +1,87 @@ +<===> arg1/positive_infinity/input.scss +a {b: color(srgb calc(infinity) 0 0)} + +<===> arg1/positive_infinity/output.css +a { + b: color(srgb calc(infinity) 0 0); +} + +<===> +================================================================================ +<===> arg1/negative_infinity/input.scss +a {b: color(srgb calc(-infinity) 0 0)} + +<===> arg1/negative_infinity/output.css +a { + b: color(srgb calc(-infinity) 0 0); +} + +<===> +================================================================================ +<===> arg1/nan/input.scss +a {b: color(srgb calc(NaN) 0 0)} + +<===> arg1/nan/output.css +a { + b: color(srgb calc(NaN) 0 0); +} + +<===> +================================================================================ +<===> before_alpha/positive_infinity/input.scss +a {b: color(srgb 0 0 calc(infinity) / 0.5)} + +<===> before_alpha/positive_infinity/output.css +a { + b: color(srgb 0 0 calc(infinity) / 0.5); +} + +<===> +================================================================================ +<===> before_alpha/negative_infinity/input.scss +a {b: color(srgb 0 0 calc(-infinity) / 0.5)} + +<===> before_alpha/negative_infinity/output.css +a { + b: color(srgb 0 0 calc(-infinity) / 0.5); +} + +<===> +================================================================================ +<===> before_alpha/nan/input.scss +a {b: color(srgb 0 0 calc(NaN) / 0.5)} + +<===> before_alpha/nan/output.css +a { + b: color(srgb 0 0 calc(NaN) / 0.5); +} + +<===> +================================================================================ +<===> alpha/positive_infinity/input.scss +a {b: color(srgb 0 0 0 / calc(infinity))} + +<===> alpha/positive_infinity/output.css +a { + b: color(srgb 0 0 0); +} + +<===> +================================================================================ +<===> alpha/negative_infinity/input.scss +a {b: color(srgb 0 0 0 / calc(-infinity))} + +<===> alpha/negative_infinity/output.css +a { + b: color(srgb 0 0 0 / 0); +} + +<===> +================================================================================ +<===> alpha/nan/input.scss +a {b: color(srgb 0 0 0 / calc(NaN))} + +<===> alpha/nan/output.css +a { + b: color(srgb 0 0 0 / 0); +} diff --git a/spec/core_functions/color/complement.hrx b/spec/core_functions/color/complement.hrx index 8f9ec08513..bcca07395e 100644 --- a/spec/core_functions/color/complement.hrx +++ b/spec/core_functions/color/complement.hrx @@ -68,22 +68,134 @@ a { <===> ================================================================================ -<===> non_legacy/input.scss -a {b: complement(lab(54.3 80.8 69.9), lch)} +<===> space/legacy/to_legacy/input.scss +@use 'sass:color'; +a {b: color.complement(red, $space: hwb)} -<===> non_legacy/output.css +<===> space/legacy/to_legacy/output.css a { - b: lab(54.3% -80.8 -69.9); + b: aqua; +} + +<===> +================================================================================ +<===> space/legacy/to_modern/input.scss +@use 'sass:color'; +a {b: color.complement(red, $space: oklch)} + +<===> space/legacy/to_modern/output.css +a { + b: hsl(188.1998868883, 488.1808399597%, 14.588696385%); +} + +<===> +================================================================================ +<===> space/modern/to_legacy/input.scss +@use 'sass:color'; +a {b: color.complement(lab(50% 10 -20), $space: hsl)} + +<===> space/modern/to_legacy/output.css +a { + b: lab(61.7521821385% -8.5219772697 19.4842183485); +} + +<===> +================================================================================ +<===> space/modern/to_modern/input.scss +@use 'sass:color'; +a {b: color.complement(lab(50% 10 -20), $space: oklch)} + +<===> space/modern/to_modern/output.css +a { + b: lab(51.2269614349% -7.7080887555 21.8652618775); +} + +<===> +================================================================================ +<===> space/missing/legacy/same/implicit/input.scss +@use 'sass:color'; +a {b: color.complement(hsl(0deg 50% none))} + +<===> space/missing/legacy/same/implicit/output.css +a { + b: hsl(180deg 50% none); +} + +<===> +================================================================================ +<===> space/missing/legacy/same/explicit/input.scss +@use 'sass:color'; +a {b: color.complement(hsl(0deg 50% none), $space: hsl)} + +<===> space/missing/legacy/same/explicit/output.css +a { + b: hsl(180deg 50% none); +} + +<===> +================================================================================ +<===> space/missing/legacy/different/implicit/input.scss +@use 'sass:color'; +a {b: color.complement(hwb(0deg 50% none))} + +<===> space/missing/legacy/different/implicit/output.css +a { + b: hsl(180, 100%, 75%); +} + +<===> +================================================================================ +<===> space/missing/legacy/different/explicit/input.scss +@use 'sass:color'; +a {b: color.complement(hwb(0deg 50% none), $space: hsl)} + +<===> space/missing/legacy/different/explicit/output.css +a { + b: hsl(180, 100%, 75%); +} + +<===> +================================================================================ +<===> space/missing/modern/same/input.scss +@use 'sass:color'; +a {b: color.complement(lch(none 50% 0deg), $space: hsl)} + +<===> space/missing/modern/same/output.css +a { + b: lch(none 0 none); +} + +<===> +================================================================================ +<===> space/missing/modern/different/input.scss +@use 'sass:color'; +a {b: color.complement(color(srgb none 100 200), $space: oklch)} + +<===> space/missing/modern/different/output.css +a { + b: color(srgb 156.4212689375 85.1578644836 -71.2263945029); } <===> ================================================================================ -<===> predefined/input.scss -a {b: complement(color(srgb-linear 0.6 0 0.6), hwb)} +<===> space/missing/modern/analogous/input.scss +@use 'sass:color'; +a {b: color.complement(lch(none 50% 0deg), $space: oklch)} -<===> predefined/output.css +<===> space/missing/modern/analogous/output.css a { - b: color(srgb-linear 0 0.6 0); + b: lch(none 24.5072211405 180.9107983689deg); +} + +<===> +================================================================================ +<===> space/powerless/legacy/implicit/input.scss +@use 'sass:color'; +a {b: color.complement(hsl(0deg 0% 50%))} + +<===> space/powerless/legacy/implicit/output.css +a { + b: hsl(180, 0%, 50%); } <===> @@ -168,3 +280,117 @@ Error: $space: Color space xyz doesn't have a hue channel. | ^^^^^^^^^^^^^^^^^^^^ ' input.scss 1:7 root stylesheet + +<===> +================================================================================ +<===> error/space/missing/legacy/same/implicit/input.scss +@use 'sass:color'; +a {b: color.complement(hsl(none 30% 40%))} + +<===> error/space/missing/legacy/same/implicit/error +Error: $hue: Because the CSS working group is still deciding on the best behavior, Sass doesn't currently support modifying missing channels (color: hsl(none 30% 40%)). + , +2 | a {b: color.complement(hsl(none 30% 40%))} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> error/space/missing/legacy/same/explicit/input.scss +@use 'sass:color'; +a {b: color.complement(hsl(none 30% 40%), $space: hsl)} + +<===> error/space/missing/legacy/same/explicit/error +Error: $hue: Because the CSS working group is still deciding on the best behavior, Sass doesn't currently support modifying missing channels (color: hsl(none 30% 40%)). + , +2 | a {b: color.complement(hsl(none 30% 40%), $space: hsl)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> error/space/missing/legacy/analogous/hue/input.scss +@use 'sass:color'; +a {b: color.complement(hsl(none 30% 40%), $space: lch)} + +<===> error/space/missing/legacy/analogous/hue/error +Error: $hue: Because the CSS working group is still deciding on the best behavior, Sass doesn't currently support modifying missing channels (color: lch(38.0910184332% 29.3078189694 none)). + , +2 | a {b: color.complement(hsl(none 30% 40%), $space: lch)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> error/space/missing/legacy/analogous/lightness/input.scss +// This is an error specifically because hsl(0deg 50% none) converts through +// rgb(0 0 0) to lch(none 0 none), so adjusting the hue fails. +@use 'sass:color'; +a {b: color.complement(hsl(0deg 50% none), $space: lch)} + +<===> error/space/missing/legacy/analogous/lightness/error +Error: $hue: Because the CSS working group is still deciding on the best behavior, Sass doesn't currently support modifying missing channels (color: lch(none 0 none)). + , +4 | a {b: color.complement(hsl(0deg 50% none), $space: lch)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 4:7 root stylesheet + +<===> +================================================================================ +<===> error/space/missing/modern/same/input.scss +@use 'sass:color'; +a {b: color.complement(lch(40% 30% none), $space: hsl)} + +<===> error/space/missing/modern/same/error +Error: $hue: Because the CSS working group is still deciding on the best behavior, Sass doesn't currently support modifying missing channels (color: hsl(none 46.6772108151% 42.1546574074%)). + , +2 | a {b: color.complement(lch(40% 30% none), $space: hsl)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> error/space/missing/modern/analogous/input.scss +@use 'sass:color'; +a {b: color.complement(lch(40% 30% none), $space: lch)} + +<===> error/space/missing/modern/analogous/error +Error: $hue: Because the CSS working group is still deciding on the best behavior, Sass doesn't currently support modifying missing channels (color: lch(40% 45 none)). + , +2 | a {b: color.complement(lch(40% 30% none), $space: lch)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> error/space/powerless/legacy/explicit/input.scss +@use 'sass:color'; +a {b: color.complement(grey, $space: hsl)} + +<===> error/space/powerless/legacy/explicit/error +Error: $hue: Because the CSS working group is still deciding on the best behavior, Sass doesn't currently support modifying missing channels (color: hsl(none 0% 50.1960784314%)). + , +2 | a {b: color.complement(grey, $space: hsl)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> error/space/powerless/modern/input.scss +@use 'sass:color'; +a {b: color.complement(lab(50% 0 0), $space: lch)} + +<===> error/space/powerless/modern/error +Error: $hue: Because the CSS working group is still deciding on the best behavior, Sass doesn't currently support modifying missing channels (color: lch(50% 0 none)). + , +2 | a {b: color.complement(lab(50% 0 0), $space: lch)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet diff --git a/spec/core_functions/color/darken.hrx b/spec/core_functions/color/darken.hrx index 627c742467..569cf90dbc 100644 --- a/spec/core_functions/color/darken.hrx +++ b/spec/core_functions/color/darken.hrx @@ -248,3 +248,16 @@ Error: $amount: Expected 100.001 to be within 0 and 100. | ^^^^^^^^^^^^^^^^^^^^ ' input.scss 1:7 root stylesheet + +<===> +================================================================================ +<===> error/non_legacy/input.scss +a {b: darken(color(srgb 1 1 1), 10%)} + +<===> error/non_legacy/error +Error: darken() is only supported for legacy colors. Please use color.adjust() instead with an explicit $space argument. + , +1 | a {b: darken(color(srgb 1 1 1), 10%)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 1:7 root stylesheet diff --git a/spec/core_functions/color/desaturate.hrx b/spec/core_functions/color/desaturate.hrx index 48b3a43c1f..08a0fa1d18 100644 --- a/spec/core_functions/color/desaturate.hrx +++ b/spec/core_functions/color/desaturate.hrx @@ -241,3 +241,16 @@ Error: $amount: Expected 100.001 to be within 0 and 100. | ^^^^^^^^^^^^^^^^^^^^^^^^^ ' input.scss 1:7 root stylesheet + +<===> +================================================================================ +<===> error/non_legacy/input.scss +a {b: desaturate(color(srgb 1 1 1), 10%)} + +<===> error/non_legacy/error +Error: desaturate() is only supported for legacy colors. Please use color.adjust() instead with an explicit $space argument. + , +1 | a {b: desaturate(color(srgb 1 1 1), 10%)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 1:7 root stylesheet diff --git a/spec/core_functions/color/fade_in.hrx b/spec/core_functions/color/fade_in.hrx index 0d3f13151b..b99cf5af47 100644 --- a/spec/core_functions/color/fade_in.hrx +++ b/spec/core_functions/color/fade_in.hrx @@ -239,3 +239,16 @@ Error: $amount: Expected 50% to be within 0 and 1. | ^^^^^^^^^^^^^^^^^ ' input.scss 3:7 root stylesheet + +<===> +================================================================================ +<===> error/non_legacy/input.scss +a {b: fade-in(color(srgb 1 1 1 / 0.1), 0.1)} + +<===> error/non_legacy/error +Error: fade-in() is only supported for legacy colors. Please use color.adjust() instead with an explicit $space argument. + , +1 | a {b: fade-in(color(srgb 1 1 1 / 0.1), 0.1)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 1:7 root stylesheet diff --git a/spec/core_functions/color/fade_out.hrx b/spec/core_functions/color/fade_out.hrx index bdcb083c28..146ee8d427 100644 --- a/spec/core_functions/color/fade_out.hrx +++ b/spec/core_functions/color/fade_out.hrx @@ -239,3 +239,16 @@ Error: $amount: Expected 50% to be within 0 and 1. | ^^^^^^^^^^^^^^^^^^ ' input.scss 3:7 root stylesheet + +<===> +================================================================================ +<===> error/non_legacy/input.scss +a {b: fade-out(color(srgb 1 1 1), 0.1)} + +<===> error/non_legacy/error +Error: fade-out() is only supported for legacy colors. Please use color.adjust() instead with an explicit $space argument. + , +1 | a {b: fade-out(color(srgb 1 1 1), 0.1)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 1:7 root stylesheet diff --git a/spec/core_functions/color/grayscale.hrx b/spec/core_functions/color/grayscale.hrx index 5376f97e55..ac27b818e4 100644 --- a/spec/core_functions/color/grayscale.hrx +++ b/spec/core_functions/color/grayscale.hrx @@ -62,6 +62,39 @@ a { b: rgba(76.5, 76.5, 76.5, 0.3); } +<===> +================================================================================ +<===> legacy/powerless/same/input.scss +@use 'sass:color'; +a {b: color.grayscale(hsl(120deg 10% 20%))} + +<===> legacy/powerless/same/output.css +a { + b: hsl(120, 0%, 20%); +} + +<===> +================================================================================ +<===> legacy/powerless/different/input.scss +@use 'sass:color'; +a {b: color.grayscale(hwb(120deg 10% 20%))} + +<===> legacy/powerless/different/output.css +a { + b: hsl(0, 0%, 45%); +} + +<===> +================================================================================ +<===> legacy/missing/input.scss +@use 'sass:color'; +a {b: color.grayscale(hsl(none none none))} + +<===> legacy/missing/output.css +a { + b: hsl(none 0% none); +} + <===> ================================================================================ <===> global/number/input.scss @@ -160,15 +193,37 @@ a { <===> ================================================================================ -<===> non_legacy/predefined/input.scss +<===> modern/predefined/input.scss @use 'sass:color'; a {b: color.grayscale(color(xyz-d65 0.41 0.21 0.02))} -<===> non_legacy/predefined/output.css +<===> modern/predefined/output.css a { b: color(xyz 0.232829773 0.2449664044 0.2667826176); } +<===> +================================================================================ +<===> modern/powerless/input.scss +@use 'sass:color'; +a {b: color.grayscale(oklch(20% 10% 120deg))} + +<===> modern/powerless/output.css +a { + b: oklch(20% 0 120deg); +} + +<===> +================================================================================ +<===> modern/missing/input.scss +@use 'sass:color'; +a {b: color.grayscale(oklch(none none none))} + +<===> modern/missing/output.css +a { + b: oklch(none 0 none); +} + <===> ================================================================================ <===> error/too_few_args/input.scss diff --git a/spec/core_functions/color/green.hrx b/spec/core_functions/color/green.hrx index f1d95aaa0b..8e858667df 100644 --- a/spec/core_functions/color/green.hrx +++ b/spec/core_functions/color/green.hrx @@ -134,3 +134,17 @@ Error: $color: 1 is not a color. | ^^^^^^^^ ' input.scss 1:7 root stylesheet + +<===> +================================================================================ +<===> error/non_legacy/input.scss +@use 'sass:color'; +a {b: color.green(color(srgb 1 1 1))} + +<===> error/non_legacy/error +Error: color.green() is only supported for legacy colors. Please use color.channel() instead with an explicit $space argument. + , +2 | a {b: color.green(color(srgb 1 1 1))} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet diff --git a/spec/core_functions/color/hsl/four_args/clamped.hrx b/spec/core_functions/color/hsl/four_args/clamped.hrx deleted file mode 100644 index 85a62b65dd..0000000000 --- a/spec/core_functions/color/hsl/four_args/clamped.hrx +++ /dev/null @@ -1,42 +0,0 @@ -<===> README.md -Channels that are out of bounds are clamped within bounds. - -<===> -================================================================================ -<===> saturation/input.scss -a {b: hsl(0, -0.1%, 50%, 0.5)} - -<===> saturation/output.css -a { - b: hsla(0, 0%, 50%, 0.5); -} - -<===> -================================================================================ -<===> blue/input.scss -a {b: hsl(0, 100%, 9999%, 0.5)} - -<===> blue/output.css -a { - b: hsla(0, 100%, 9999%, 0.5); -} - -<===> -================================================================================ -<===> alpha/above/input.scss -a {b: hsl(0, 100%, 50%, 1.1)} - -<===> alpha/above/output.css -a { - b: hsl(0, 100%, 50%); -} - -<===> -================================================================================ -<===> alpha/below/input.scss -a {b: hsla(0, 100%, 50%, -0.1)} - -<===> alpha/below/output.css -a { - b: hsla(0, 100%, 50%, 0); -} diff --git a/spec/core_functions/color/hsl/four_args/out_of_gamut.hrx b/spec/core_functions/color/hsl/four_args/out_of_gamut.hrx new file mode 100644 index 0000000000..c13e978275 --- /dev/null +++ b/spec/core_functions/color/hsl/four_args/out_of_gamut.hrx @@ -0,0 +1,235 @@ +<===> hue/degenerate/positive_infinity/input.scss +a {b: hsl(calc(infinity), 100%, 50%)} + +<===> hue/degenerate/positive_infinity/output.css +a { + b: hsl(calc(NaN), 100%, 50%); +} + +<===> +================================================================================ +<===> hue/degenerate/negative_infinity/input.scss +a {b: hsl(calc(-infinity), 100%, 50%)} + +<===> hue/degenerate/negative_infinity/output.css +a { + b: hsl(calc(NaN), 100%, 50%); +} + +<===> +================================================================================ +<===> hue/degenerate/nan/input.scss +a {b: hsl(calc(NaN), 100%, 50%)} + +<===> hue/degenerate/nan/output.css +a { + b: hsl(calc(NaN), 100%, 50%); +} + +<===> +================================================================================ +<===> saturation/finite/input.scss +a {b: hsl(0, -0.1%, 50%, 0.5)} + +<===> saturation/finite/output.css +a { + b: hsla(0, 0%, 50%, 0.5); +} + +<===> +================================================================================ +<===> saturation/degenerate/positive_infinity/input.scss +a {b: hsl(0, calc(infinity), 50%)} + +<===> saturation/degenerate/positive_infinity/output.css +a { + b: hsl(0, calc(infinity * 1%), 50%); +} + +<===> saturation/degenerate/positive_infinity/warning +DEPRECATION WARNING: $saturation: Passing a number without unit % (calc(infinity)) is deprecated. + +To preserve current behavior: $saturation * 1% + +More info: https://sass-lang.com/d/function-units + + , +1 | a {b: hsl(0, calc(infinity), 50%)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 1:7 root stylesheet + +<===> +================================================================================ +<===> saturation/degenerate/negative_infinity/input.scss +a {b: hsl(0, calc(-infinity), 50%)} + +<===> saturation/degenerate/negative_infinity/output.css +a { + b: hsl(0, 0%, 50%); +} + +<===> saturation/degenerate/negative_infinity/warning +DEPRECATION WARNING: $saturation: Passing a number without unit % (calc(-infinity)) is deprecated. + +To preserve current behavior: $saturation * 1% + +More info: https://sass-lang.com/d/function-units + + , +1 | a {b: hsl(0, calc(-infinity), 50%)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 1:7 root stylesheet + +<===> +================================================================================ +<===> saturation/degenerate/nan/input.scss +a {b: hsl(0, calc(NaN), 50%)} + +<===> saturation/degenerate/nan/output.css +a { + b: hsl(0, 0%, 50%); +} + +<===> saturation/degenerate/nan/warning +DEPRECATION WARNING: $saturation: Passing a number without unit % (calc(NaN)) is deprecated. + +To preserve current behavior: $saturation * 1% + +More info: https://sass-lang.com/d/function-units + + , +1 | a {b: hsl(0, calc(NaN), 50%)} + | ^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 1:7 root stylesheet + +<===> +================================================================================ +<===> lightness/finite/input.scss +a {b: hsl(0, 100%, 9999%, 0.5)} + +<===> lightness/finite/output.css +a { + b: hsla(0, 100%, 9999%, 0.5); +} + +<===> +================================================================================ +<===> lightness/degenerate/positive_infinity/input.scss +a {b: hsl(0, 100%, calc(infinity))} + +<===> lightness/degenerate/positive_infinity/output.css +a { + b: hsl(0, 100%, calc(infinity * 1%)); +} + +<===> lightness/degenerate/positive_infinity/warning +DEPRECATION WARNING: $lightness: Passing a number without unit % (calc(infinity)) is deprecated. + +To preserve current behavior: $lightness * 1% + +More info: https://sass-lang.com/d/function-units + + , +1 | a {b: hsl(0, 100%, calc(infinity))} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 1:7 root stylesheet + +<===> +================================================================================ +<===> lightness/degenerate/negative_infinity/input.scss +a {b: hsl(0, 100%, calc(-infinity))} + +<===> lightness/degenerate/negative_infinity/output.css +a { + b: hsl(0, 100%, calc(-infinity * 1%)); +} + +<===> lightness/degenerate/negative_infinity/warning +DEPRECATION WARNING: $lightness: Passing a number without unit % (calc(-infinity)) is deprecated. + +To preserve current behavior: $lightness * 1% + +More info: https://sass-lang.com/d/function-units + + , +1 | a {b: hsl(0, 100%, calc(-infinity))} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 1:7 root stylesheet + +<===> +================================================================================ +<===> lightness/degenerate/nan/input.scss +a {b: hsl(0, 100%, calc(NaN))} + +<===> lightness/degenerate/nan/output.css +a { + b: hsl(0, 100%, calc(NaN * 1%)); +} + +<===> lightness/degenerate/nan/warning +DEPRECATION WARNING: $lightness: Passing a number without unit % (calc(NaN)) is deprecated. + +To preserve current behavior: $lightness * 1% + +More info: https://sass-lang.com/d/function-units + + , +1 | a {b: hsl(0, 100%, calc(NaN))} + | ^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 1:7 root stylesheet + +<===> +================================================================================ +<===> alpha/finite/above/input.scss +a {b: hsl(0, 100%, 50%, 1.1)} + +<===> alpha/finite/above/output.css +a { + b: hsl(0, 100%, 50%); +} + +<===> +================================================================================ +<===> alpha/finite/below/input.scss +a {b: hsla(0, 100%, 50%, -0.1)} + +<===> alpha/finite/below/output.css +a { + b: hsla(0, 100%, 50%, 0); +} + +<===> +================================================================================ +<===> alpha/degenerate/positive_infinity/input.scss +a {b: hsl(0, 100%, 50%, calc(infinity))} + +<===> alpha/degenerate/positive_infinity/output.css +a { + b: hsl(0, 100%, 50%); +} + +<===> +================================================================================ +<===> alpha/degenerate/negative_infinity/input.scss +a {b: hsl(0, 100%, 50%, calc(-infinity))} + +<===> alpha/degenerate/negative_infinity/output.css +a { + b: hsla(0, 100%, 50%, 0); +} + +<===> +================================================================================ +<===> alpha/degenerate/nan/input.scss +a {b: hsl(0, 100%, 50%, calc(NaN))} + +<===> alpha/degenerate/nan/output.css +a { + b: hsla(0, 100%, 50%, 0); +} diff --git a/spec/core_functions/color/hue.hrx b/spec/core_functions/color/hue.hrx index 9a06047b11..11dbc1e9eb 100644 --- a/spec/core_functions/color/hue.hrx +++ b/spec/core_functions/color/hue.hrx @@ -203,3 +203,17 @@ Error: $color: 1 is not a color. | ^^^^^^ ' input.scss 1:7 root stylesheet + +<===> +================================================================================ +<===> error/non_legacy/input.scss +@use 'sass:color'; +a {b: color.hue(lch(0% 0 0deg))} + +<===> error/non_legacy/error +Error: color.hue() is only supported for legacy colors. Please use color.channel() instead with an explicit $space argument. + , +2 | a {b: color.hue(lch(0% 0 0deg))} + | ^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet diff --git a/spec/core_functions/color/hwb/four_args.hrx b/spec/core_functions/color/hwb/four_args.hrx index c42598cdf2..37ecedcae1 100644 --- a/spec/core_functions/color/hwb/four_args.hrx +++ b/spec/core_functions/color/hwb/four_args.hrx @@ -7,6 +7,39 @@ a { b: hwb(var(--c) 30% 40% / 0.5); } +<===> +================================================================================ +<===> hue/degenerate/positive_infinity/input.scss +@use 'sass:color'; +a {b: color.hwb(calc(infinity), 30%, 40%, 0.5)} + +<===> hue/degenerate/positive_infinity/output.css +a { + b: hsla(0, 0%, 30%, 0.5); +} + +<===> +================================================================================ +<===> hue/degenerate/negative_infinity/input.scss +@use 'sass:color'; +a {b: color.hwb(calc(-infinity), 30%, 40%, 0.5)} + +<===> hue/degenerate/negative_infinity/output.css +a { + b: hsla(0, 0%, 30%, 0.5); +} + +<===> +================================================================================ +<===> hue/degenerate/nan/input.scss +@use 'sass:color'; +a {b: color.hwb(calc(NaN), 30%, 40%, 0.5)} + +<===> hue/degenerate/nan/output.css +a { + b: hsla(0, 0%, 30%, 0.5); +} + <===> ================================================================================ <===> whiteness/above_max/input.scss @@ -40,6 +73,39 @@ a { b: hwb(0 var(--c) 40% / 0.5); } +<===> +================================================================================ +<===> whiteness/degenerate/positive_infinity/input.scss +@use 'sass:color'; +a {b: color.hwb(0, calc(infinity * 1%), 40%, 0.5)} + +<===> whiteness/degenerate/positive_infinity/output.css +a { + b: hsla(calc(NaN), calc(NaN * 1%), calc(NaN * 1%), 0.5); +} + +<===> +================================================================================ +<===> whiteness/degenerate/negative_infinity/input.scss +@use 'sass:color'; +a {b: color.hwb(0, calc(-infinity * 1%), 40%, 0.5)} + +<===> whiteness/degenerate/negative_infinity/output.css +a { + b: hsla(calc(NaN), calc(NaN * 1%), calc(NaN * 1%), 0.5); +} + +<===> +================================================================================ +<===> whiteness/degenerate/nan/input.scss +@use 'sass:color'; +a {b: color.hwb(0, calc(NaN * 1%), 40%, 0.5)} + +<===> whiteness/degenerate/nan/output.css +a { + b: hsla(calc(NaN), calc(NaN * 1%), calc(NaN * 1%), 0.5); +} + <===> ================================================================================ <===> blackness/above_max/input.scss @@ -73,6 +139,39 @@ a { b: hwb(0 30% var(--c) / 0.5); } +<===> +================================================================================ +<===> blackness/degenerate/positive_infinity/input.scss +@use 'sass:color'; +a {b: color.hwb(0, 30%, calc(infinity * 1%), 0.5)} + +<===> blackness/degenerate/positive_infinity/output.css +a { + b: hsla(calc(NaN), calc(NaN * 1%), calc(NaN * 1%), 0.5); +} + +<===> +================================================================================ +<===> blackness/degenerate/negative_infinity/input.scss +@use 'sass:color'; +a {b: color.hwb(0, 30%, calc(-infinity * 1%), 0.5)} + +<===> blackness/degenerate/negative_infinity/output.css +a { + b: hsla(calc(NaN), calc(NaN * 1%), calc(NaN * 1%), 0.5); +} + +<===> +================================================================================ +<===> blackness/degenerate/nan/input.scss +@use 'sass:color'; +a {b: color.hwb(0, 30%, calc(NaN * 1%), 0.5)} + +<===> blackness/degenerate/nan/output.css +a { + b: hsla(calc(NaN), calc(NaN * 1%), calc(NaN * 1%), 0.5); +} + <===> ================================================================================ <===> alpha/percent/negative/input.scss @@ -194,6 +293,39 @@ a { b: hwb(0 0% 0% / var(--c)); } +<===> +================================================================================ +<===> alpha/degenerate/positive_infinity/input.scss +@use 'sass:color'; +a {b: color.hwb(0, 30%, 40%, calc(infinity))} + +<===> alpha/degenerate/positive_infinity/output.css +a { + b: hsl(0, 33.3333333333%, 45%); +} + +<===> +================================================================================ +<===> alpha/degenerate/negative_infinity/input.scss +@use 'sass:color'; +a {b: color.hwb(0, 30%, 40%, calc(-infinity))} + +<===> alpha/degenerate/negative_infinity/output.css +a { + b: hsla(0, 33.3333333333%, 45%, 0); +} + +<===> +================================================================================ +<===> alpha/degenerate/nan/input.scss +@use 'sass:color'; +a {b: color.hwb(0, 30%, 40%, calc(NaN))} + +<===> alpha/degenerate/nan/output.css +a { + b: hsla(0, 33.3333333333%, 45%, 0); +} + <===> ================================================================================ <===> named/input.scss diff --git a/spec/core_functions/color/invert/error.hrx b/spec/core_functions/color/invert/error.hrx index 7ed58d4915..5d5b31f41d 100644 --- a/spec/core_functions/color/invert/error.hrx +++ b/spec/core_functions/color/invert/error.hrx @@ -58,6 +58,110 @@ Error: $color: c is not a color. ' input.scss 1:7 root stylesheet +<===> +================================================================================ +<===> missing/legacy/same/implicit/input.scss +a {b: invert(rgb(none 10 20))} + +<===> missing/legacy/same/implicit/error +Error: $red: Because the CSS working group is still deciding on the best behavior, Sass doesn't currently support modifying missing channels (color: rgb(none 10 20)). + , +1 | a {b: invert(rgb(none 10 20))} + | ^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 1:7 root stylesheet + +<===> +================================================================================ +<===> missing/legacy/same/explicit/input.scss +a {b: invert(hsl(0 40% none), $space: hsl)} + +<===> missing/legacy/same/explicit/error +Error: $lightness: Because the CSS working group is still deciding on the best behavior, Sass doesn't currently support modifying missing channels (color: hsl(0deg 40% none)). + , +1 | a {b: invert(hsl(0 40% none), $space: hsl)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 1:7 root stylesheet + +<===> +================================================================================ +<===> missing/legacy/same/hwb_hue/input.scss +a {b: invert(hwb(none 10% 20%), $space: hwb)} + +<===> missing/legacy/same/hwb_hue/error +Error: $hue: Because the CSS working group is still deciding on the best behavior, Sass doesn't currently support modifying missing channels (color: hwb(none 10% 20%)). + , +1 | a {b: invert(hwb(none 10% 20%), $space: hwb)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 1:7 root stylesheet + +<===> +================================================================================ +<===> missing/legacy/analogous/input.scss +a {b: invert(rgb(10 none 20), $space: xyz)} + +<===> missing/legacy/analogous/error +Error: $y: Because the CSS working group is still deciding on the best behavior, Sass doesn't currently support modifying missing channels (color: color(xyz 0.0025142545 none 0.0067080366)). + , +1 | a {b: invert(rgb(10 none 20), $space: xyz)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 1:7 root stylesheet + +<===> +================================================================================ +<===> missing/legacy/powerless/input.scss +a {b: invert(grey, $space: hsl)} + +<===> missing/legacy/powerless/error +Error: $hue: Because the CSS working group is still deciding on the best behavior, Sass doesn't currently support modifying missing channels (color: hsl(none 0% 50.1960784314%)). + , +1 | a {b: invert(grey, $space: hsl)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 1:7 root stylesheet + +<===> +================================================================================ +<===> missing/modern/same/input.scss +a {b: invert(color(srgb none 0.1 0.2), $space: srgb)} + +<===> missing/modern/same/error +Error: $red: Because the CSS working group is still deciding on the best behavior, Sass doesn't currently support modifying missing channels (color: color(srgb none 0.1 0.2)). + , +1 | a {b: invert(color(srgb none 0.1 0.2), $space: srgb)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 1:7 root stylesheet + +<===> +================================================================================ +<===> missing/modern/analogous/input.scss +a {b: invert(color(rec2020 0.1 none 0.2), $space: xyz)} + +<===> missing/modern/analogous/error +Error: $y: Because the CSS working group is still deciding on the best behavior, Sass doesn't currently support modifying missing channels (color: color(xyz 0.0237000113 none 0.0589013339)). + , +1 | a {b: invert(color(rec2020 0.1 none 0.2), $space: xyz)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 1:7 root stylesheet + +<===> +================================================================================ +<===> missing/modern/powerless/input.scss +a {b: invert(color(rec2020 0.4 0.4 0.4), $space: lch)} + +<===> missing/modern/powerless/error +Error: $hue: Because the CSS working group is still deciding on the best behavior, Sass doesn't currently support modifying missing channels (color: lch(48.649404846% 0 none)). + , +1 | a {b: invert(color(rec2020 0.4 0.4 0.4), $space: lch)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 1:7 root stylesheet + <===> ================================================================================ <===> type/color/input.scss @@ -128,6 +232,34 @@ Error: $space: Unknown color space "c". ' input.scss 2:7 root stylesheet +<===> +================================================================================ +<===> space/missing/default_weight/input.scss +@use 'sass:color'; +a {b: color.invert(lab(50% -10 10))} + +<===> space/missing/default_weight/error +Error: $color: To use color.invert() with non-legacy color lab(50% -10 10), you must provide a $space. + , +2 | a {b: color.invert(lab(50% -10 10))} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> space/missing/zero_weight/input.scss +@use 'sass:color'; +a {b: color.invert(lab(50% -10 10), 0%)} + +<===> space/missing/zero_weight/error +Error: $color: To use color.invert() with non-legacy color lab(50% -10 10), you must provide a $space. + , +2 | a {b: color.invert(lab(50% -10 10), 0%)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + <===> ================================================================================ <===> bounds/too_low/input.scss diff --git a/spec/core_functions/color/invert/legacy.hrx b/spec/core_functions/color/invert/legacy.hrx index 915a921156..38670ab456 100644 --- a/spec/core_functions/color/invert/legacy.hrx +++ b/spec/core_functions/color/invert/legacy.hrx @@ -135,26 +135,84 @@ a { <===> ================================================================================ -<===> space/hsl/input.scss +<===> space/hsl/no_missing/input.scss @use 'sass:color'; a {b: color.invert(hsl(30deg 20% 40%), $space: hsl)} -<===> space/hsl/output.css +<===> space/hsl/no_missing/output.css a { b: hsl(210, 20%, 60%); } <===> ================================================================================ -<===> space/hwb/input.scss +<===> space/hsl/missing/same/input.scss +@use 'sass:color'; +a {b: color.invert(hsl(30deg none 40%), $space: hsl)} + +<===> space/hsl/missing/same/output.css +a { + b: hsl(210deg none 60%); +} + +<===> +================================================================================ +<===> space/hsl/missing/analogous/input.scss +@use 'sass:color'; +a {b: color.invert(hsl(30deg none 40%), $space: lch)} + +<===> space/hsl/missing/analogous/error +Error: $hue: Because the CSS working group is still deciding on the best behavior, Sass doesn't currently support modifying missing channels (color: lch(43.192289563% none none)). + , +2 | a {b: color.invert(hsl(30deg none 40%), $space: lch)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> space/hwb/no_missing/input.scss @use 'sass:color'; a {b: color.invert(hwb(30deg 20% 40%), $space: hwb)} -<===> space/hwb/output.css +<===> space/hwb/no_missing/output.css a { b: #6699cc; } +<===> +================================================================================ +<===> space/hwb/missing/input.scss +@use 'sass:color'; +a {b: color.invert(hwb(30deg none 40%), $space: hwb)} + +<===> space/hwb/missing/output.css +a { + b: hwb(210deg 40% none); +} + +<===> +================================================================================ +<===> space/powerless/same/input.scss +@use 'sass:color'; +a {b: color.invert(hsl(120deg 0% 40%), $space: hsl)} + +<===> space/powerless/same/output.css +a { + b: hsl(300, 0%, 60%); +} + +<===> +================================================================================ +<===> space/powerless/different/input.scss +@use 'sass:color'; +a {b: color.invert(hsl(120deg 0% 40%), $space: rgb)} + +<===> space/powerless/different/output.css +a { + b: hsl(0, 0%, 60%); +} + <===> ================================================================================ <===> space/modern/input.scss diff --git a/spec/core_functions/color/invert/modern.hrx b/spec/core_functions/color/invert/modern.hrx index 041c57af86..ee583bbc16 100644 --- a/spec/core_functions/color/invert/modern.hrx +++ b/spec/core_functions/color/invert/modern.hrx @@ -105,3 +105,36 @@ a {b: color.invert(lch(20% 80 50deg), $space: DISPLAY-p3)} a { b: lch(97.4036876937% 47.4823953357 211.8732507605deg); } + +<===> +================================================================================ +<===> space/missing_converted/input.scss +@use 'sass:color'; +a {b: color.invert(color(rec2020 none none none), $space: lab)} + +<===> space/missing_converted/output.css +a { + b: color(rec2020 1 1 1); +} + +<===> +================================================================================ +<===> space/powerless/same/input.scss +@use 'sass:color'; +a {b: color.invert(lch(40% 0% 120deg), $space: lch)} + +<===> space/powerless/same/output.css +a { + b: lch(60% 0 300deg); +} + +<===> +================================================================================ +<===> space/powerless/different/input.scss +@use 'sass:color'; +a {b: color.invert(lch(40% 0% 120deg), $space: lab)} + +<===> space/powerless/different/output.css +a { + b: lch(60% 0 none); +} diff --git a/spec/core_functions/color/lab/alpha.hrx b/spec/core_functions/color/lab/alpha.hrx index cff840012c..f5cbdb3bed 100644 --- a/spec/core_functions/color/lab/alpha.hrx +++ b/spec/core_functions/color/lab/alpha.hrx @@ -48,6 +48,45 @@ a { channels: 1% 2 3 / 0.4; } +<===> +================================================================================ +<===> degenerate/positive_infinity/input.scss +@use 'core_functions/color/utils'; +@include utils.inspect(lab(1% 2 -3 / calc(infinity))); + +<===> degenerate/positive_infinity/output.css +a { + value: lab(1% 2 -3); + space: lab; + channels: 1% 2 -3 / 1; +} + +<===> +================================================================================ +<===> degenerate/negative_infinity/input.scss +@use 'core_functions/color/utils'; +@include utils.inspect(lab(1% 2 -3 / calc(-infinity))); + +<===> degenerate/negative_infinity/output.css +a { + value: lab(1% 2 -3 / 0); + space: lab; + channels: 1% 2 -3 / 0; +} + +<===> +================================================================================ +<===> degenerate/nan/input.scss +@use 'core_functions/color/utils'; +@include utils.inspect(lab(1% 2 -3 / calc(NaN))); + +<===> degenerate/nan/output.css +a { + value: lab(1% 2 -3 / 0); + space: lab; + channels: 1% 2 -3 / 0; +} + <===> ================================================================================ <===> named/input.scss diff --git a/spec/core_functions/color/lab/no_alpha.hrx b/spec/core_functions/color/lab/no_alpha.hrx index 39d71357fe..a8dbf05b22 100644 --- a/spec/core_functions/color/lab/no_alpha.hrx +++ b/spec/core_functions/color/lab/no_alpha.hrx @@ -35,6 +35,84 @@ a { channels: 1% -126 -300 / 1; } +<===> +================================================================================ +<===> unitless/a/degenerate/positive_infinity/input.scss +@use 'core_functions/color/utils'; +@include utils.inspect(lab(1% calc(infinity) -3)); + +<===> unitless/a/degenerate/positive_infinity/output.css +a { + value: lab(1% calc(infinity) -3); + space: lab; + channels: 1% calc(infinity) -3 / 1; +} + +<===> +================================================================================ +<===> unitless/a/degenerate/negative_infinity/input.scss +@use 'core_functions/color/utils'; +@include utils.inspect(lab(1% calc(-infinity) -3)); + +<===> unitless/a/degenerate/negative_infinity/output.css +a { + value: lab(1% calc(-infinity) -3); + space: lab; + channels: 1% calc(-infinity) -3 / 1; +} + +<===> +================================================================================ +<===> unitless/a/degenerate/nan/input.scss +@use 'core_functions/color/utils'; +@include utils.inspect(lab(1% calc(NaN) -3)); + +<===> unitless/a/degenerate/nan/output.css +a { + value: lab(1% calc(NaN) -3); + space: lab; + channels: 1% calc(NaN) -3 / 1; +} + +<===> +================================================================================ +<===> unitless/b/degenerate/positive_infinity/input.scss +@use 'core_functions/color/utils'; +@include utils.inspect(lab(1% 2 calc(infinity))); + +<===> unitless/b/degenerate/positive_infinity/output.css +a { + value: lab(1% 2 calc(infinity)); + space: lab; + channels: 1% 2 calc(infinity) / 1; +} + +<===> +================================================================================ +<===> unitless/b/degenerate/negative_infinity/input.scss +@use 'core_functions/color/utils'; +@include utils.inspect(lab(1% 2 calc(-infinity))); + +<===> unitless/b/degenerate/negative_infinity/output.css +a { + value: lab(1% 2 calc(-infinity)); + space: lab; + channels: 1% 2 calc(-infinity) / 1; +} + +<===> +================================================================================ +<===> unitless/b/degenerate/nan/input.scss +@use 'core_functions/color/utils'; +@include utils.inspect(lab(1% 2 calc(NaN))); + +<===> unitless/b/degenerate/nan/output.css +a { + value: lab(1% 2 calc(NaN)); + space: lab; + channels: 1% 2 calc(NaN) / 1; +} + <===> ================================================================================ <===> unitless/lightness/in_range/input.scss @@ -74,6 +152,45 @@ a { channels: 0% 2 3 / 1; } +<===> +================================================================================ +<===> unitless/lightness/degenerate/positive_infinity/input.scss +@use 'core_functions/color/utils'; +@include utils.inspect(lab(calc(infinity) 2 -3)); + +<===> unitless/lightness/degenerate/positive_infinity/output.css +a { + value: lab(100% 2 -3); + space: lab; + channels: 100% 2 -3 / 1; +} + +<===> +================================================================================ +<===> unitless/lightness/degenerate/negative_infinity/input.scss +@use 'core_functions/color/utils'; +@include utils.inspect(lab(calc(-infinity) 2 -3)); + +<===> unitless/lightness/degenerate/negative_infinity/output.css +a { + value: lab(0% 2 -3); + space: lab; + channels: 0% 2 -3 / 1; +} + +<===> +================================================================================ +<===> unitless/lightness/degenerate/nan/input.scss +@use 'core_functions/color/utils'; +@include utils.inspect(lab(calc(NaN) 2 -3)); + +<===> unitless/lightness/degenerate/nan/output.css +a { + value: lab(0% 2 -3); + space: lab; + channels: 0% 2 -3 / 1; +} + <===> ================================================================================ <===> percent/ab/in_range/input.scss diff --git a/spec/core_functions/color/lch/alpha.hrx b/spec/core_functions/color/lch/alpha.hrx index a5957e271f..d3e730ebf8 100644 --- a/spec/core_functions/color/lch/alpha.hrx +++ b/spec/core_functions/color/lch/alpha.hrx @@ -48,6 +48,45 @@ a { channels: 1% 2 3deg / 0.4; } +<===> +================================================================================ +<===> degenerate/positive_infinity/input.scss +@use 'core_functions/color/utils'; +@include utils.inspect(lch(1% 2 3deg / calc(infinity))); + +<===> degenerate/positive_infinity/output.css +a { + value: lch(1% 2 3deg); + space: lch; + channels: 1% 2 3deg / 1; +} + +<===> +================================================================================ +<===> degenerate/negative_infinity/input.scss +@use 'core_functions/color/utils'; +@include utils.inspect(lch(1% 2 3deg / calc(-infinity))); + +<===> degenerate/negative_infinity/output.css +a { + value: lch(1% 2 3deg / 0); + space: lch; + channels: 1% 2 3deg / 0; +} + +<===> +================================================================================ +<===> degenerate/nan/input.scss +@use 'core_functions/color/utils'; +@include utils.inspect(lch(1% 2 3deg / calc(NaN))); + +<===> degenerate/nan/output.css +a { + value: lch(1% 2 3deg / 0); + space: lch; + channels: 1% 2 3deg / 0; +} + <===> ================================================================================ <===> named/input.scss diff --git a/spec/core_functions/color/lch/no_alpha.hrx b/spec/core_functions/color/lch/no_alpha.hrx index 8d01279b8a..1402f79413 100644 --- a/spec/core_functions/color/lch/no_alpha.hrx +++ b/spec/core_functions/color/lch/no_alpha.hrx @@ -35,6 +35,45 @@ a { channels: 0% 2 3deg / 1; } +<===> +================================================================================ +<===> unitless/lightness/degenerate/positive_infinity/input.scss +@use 'core_functions/color/utils'; +@include utils.inspect(lch(calc(infinity) 2 3deg)); + +<===> unitless/lightness/degenerate/positive_infinity/output.css +a { + value: lch(100% 2 3deg); + space: lch; + channels: 100% 2 3deg / 1; +} + +<===> +================================================================================ +<===> unitless/lightness/degenerate/negative_infinity/input.scss +@use 'core_functions/color/utils'; +@include utils.inspect(lch(calc(-infinity) 2 3deg)); + +<===> unitless/lightness/degenerate/negative_infinity/output.css +a { + value: lch(0% 2 3deg); + space: lch; + channels: 0% 2 3deg / 1; +} + +<===> +================================================================================ +<===> unitless/lightness/degenerate/nan/input.scss +@use 'core_functions/color/utils'; +@include utils.inspect(lch(calc(NaN) 2 3deg)); + +<===> unitless/lightness/degenerate/nan/output.css +a { + value: lch(0% 2 3deg); + space: lch; + channels: 0% 2 3deg / 1; +} + <===> ================================================================================ <===> unitless/chroma/above_range/input.scss @@ -61,6 +100,45 @@ a { channels: 1% 0 3deg / 1; } +<===> +================================================================================ +<===> unitless/chroma/degenerate/positive_infinity/input.scss +@use 'core_functions/color/utils'; +@include utils.inspect(lch(1% calc(infinity) 3deg)); + +<===> unitless/chroma/degenerate/positive_infinity/output.css +a { + value: lch(1% calc(infinity) 3deg); + space: lch; + channels: 1% calc(infinity) 3deg / 1; +} + +<===> +================================================================================ +<===> unitless/chroma/degenerate/negative_infinity/input.scss +@use 'core_functions/color/utils'; +@include utils.inspect(lch(1% calc(-infinity) 3deg)); + +<===> unitless/chroma/degenerate/negative_infinity/output.css +a { + value: lch(1% 0 3deg); + space: lch; + channels: 1% 0 3deg / 1; +} + +<===> +================================================================================ +<===> unitless/chroma/degenerate/nan/input.scss +@use 'core_functions/color/utils'; +@include utils.inspect(lch(1% calc(NaN) 3deg)); + +<===> unitless/chroma/degenerate/nan/output.css +a { + value: lch(1% 0 3deg); + space: lch; + channels: 1% 0 3deg / 1; +} + <===> ================================================================================ <===> unitless/hue/above_range/input.scss @@ -87,6 +165,45 @@ a { channels: 1% 2 359deg / 1; } +<===> +================================================================================ +<===> unitless/hue/degenerate/positive_infinity/input.scss +@use 'core_functions/color/utils'; +@include utils.inspect(lch(1% 2 calc(infinity))); + +<===> unitless/hue/degenerate/positive_infinity/output.css +a { + value: lch(1% 2 calc(NaN * 1deg)); + space: lch; + channels: 1% 2 calc(NaN * 1deg) / 1; +} + +<===> +================================================================================ +<===> unitless/hue/degenerate/negative_infinity/input.scss +@use 'core_functions/color/utils'; +@include utils.inspect(lch(1% 2 calc(-infinity))); + +<===> unitless/hue/degenerate/negative_infinity/output.css +a { + value: lch(1% 2 calc(NaN * 1deg)); + space: lch; + channels: 1% 2 calc(NaN * 1deg) / 1; +} + +<===> +================================================================================ +<===> unitless/hue/degenerate/nan/input.scss +@use 'core_functions/color/utils'; +@include utils.inspect(lch(1% 2 calc(NaN))); + +<===> unitless/hue/degenerate/nan/output.css +a { + value: lch(1% 2 calc(NaN * 1deg)); + space: lch; + channels: 1% 2 calc(NaN * 1deg) / 1; +} + <===> ================================================================================ <===> percent/in_range/input.scss diff --git a/spec/core_functions/color/lighten.hrx b/spec/core_functions/color/lighten.hrx index f84b565f11..39d882a390 100644 --- a/spec/core_functions/color/lighten.hrx +++ b/spec/core_functions/color/lighten.hrx @@ -248,3 +248,16 @@ Error: $amount: Expected 100.001 to be within 0 and 100. | ^^^^^^^^^^^^^^^^^^^^^ ' input.scss 1:7 root stylesheet + +<===> +================================================================================ +<===> error/non_legacy/input.scss +a {b: lighten(color(srgb 0 0 0), 10%)} + +<===> error/non_legacy/error +Error: lighten() is only supported for legacy colors. Please use color.adjust() instead with an explicit $space argument. + , +1 | a {b: lighten(color(srgb 0 0 0), 10%)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 1:7 root stylesheet diff --git a/spec/core_functions/color/lightness.hrx b/spec/core_functions/color/lightness.hrx index c2f5fc7f2d..4de9980184 100644 --- a/spec/core_functions/color/lightness.hrx +++ b/spec/core_functions/color/lightness.hrx @@ -157,3 +157,17 @@ Error: $color: 1 is not a color. | ^^^^^^^^^^^^ ' input.scss 1:7 root stylesheet + +<===> +================================================================================ +<===> error/non_legacy/input.scss +@use 'sass:color'; +a {b: color.lightness(lch(0% 0 0deg))} + +<===> error/non_legacy/error +Error: color.lightness() is only supported for legacy colors. Please use color.channel() instead with an explicit $space argument. + , +2 | a {b: color.lightness(lch(0% 0 0deg))} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet diff --git a/spec/core_functions/color/mix/hue_interpolation.hrx b/spec/core_functions/color/mix/hue_interpolation.hrx index df1c19a673..1b5b55bdb7 100644 --- a/spec/core_functions/color/mix/hue_interpolation.hrx +++ b/spec/core_functions/color/mix/hue_interpolation.hrx @@ -1,17 +1,107 @@ -<===> longer/input.scss -a {b: mix(red, green, $method: hsl longer hue)} +<===> default/acute/input.scss +a {b: mix(oklch(0.5 0.1 30), oklch(0.5 0.1 190), $method: oklch)} -<===> longer/output.css +<===> default/acute/output.css a { - b: rgb(0, 0, 191.5); + b: oklch(50% 0.1 110deg); } <===> ================================================================================ -<===> increasing/weighted/input.scss -a {b: mix(red, green, 20%, lch increasing hue)} +<===> default/obtuse/input.scss +a {b: mix(oklch(0.5 0.1 30), oklch(0.5 0.1 230), $method: oklch)} -<===> increasing/weighted/output.css +<===> default/obtuse/output.css a { - b: hsl(78.7622147036, 186.3907911016%, 17.4030704435%); + b: oklch(50% 0.1 310deg); +} + +<===> +================================================================================ +<===> shorter/acute/input.scss +a {b: mix(oklch(0.5 0.1 30), oklch(0.5 0.1 190), $method: oklch shorter hue)} + +<===> shorter/acute/output.css +a { + b: oklch(50% 0.1 110deg); +} + +<===> +================================================================================ +<===> shorter/obtuse/input.scss +a {b: mix(oklch(0.5 0.1 30), oklch(0.5 0.1 230), $method: oklch shorter hue)} + +<===> shorter/obtuse/output.css +a { + b: oklch(50% 0.1 310deg); +} + +<===> +================================================================================ +<===> longer/obtuse/input.scss +a {b: mix(oklch(0.5 0.1 30), oklch(0.5 0.1 230), $method: oklch longer hue)} + +<===> longer/obtuse/output.css +a { + b: oklch(50% 0.1 130deg); +} + +<===> +================================================================================ +<===> increasing/acute/input.scss +a {b: mix(oklch(0.5 0.1 30), oklch(0.5 0.1 190), $method: oklch increasing hue)} + +<===> increasing/acute/output.css +a { + b: oklch(50% 0.1 110deg); +} + +<===> +================================================================================ +<===> increasing/obtuse/input.scss +a {b: mix(oklch(0.5 0.1 30), oklch(0.5 0.1 230), $method: oklch increasing hue)} + +<===> increasing/obtuse/output.css +a { + b: oklch(50% 0.1 130deg); +} + +<===> +================================================================================ +<===> decreasing/acute/input.scss +a {b: mix(oklch(0.5 0.1 30), oklch(0.5 0.1 190), $method: oklch decreasing hue)} + +<===> decreasing/acute/output.css +a { + b: oklch(50% 0.1 290deg); +} + +<===> +================================================================================ +<===> decreasing/obtuse/input.scss +a {b: mix(oklch(0.5 0.1 30), oklch(0.5 0.1 230), $method: oklch decreasing hue)} + +<===> decreasing/obtuse/output.css +a { + b: oklch(50% 0.1 310deg); +} + +<===> +================================================================================ +<===> weighted/input.scss +a {b: mix(red, green, 20%, lch longer hue)} + +<===> weighted/output.css +a { + b: rgb(201.9125152451, 62.5456438786, 25.0531427989); +} + +<===> +================================================================================ +<===> case_insensitive/input.scss +a {b: mix(oklch(0.5 0.1 30), oklch(0.5 0.1 190), $method: oKlCh LONger HUE)} + +<===> case_insensitive/output.css +a { + b: oklch(50% 0.1 290deg); } diff --git a/spec/core_functions/color/mix/missing.hrx b/spec/core_functions/color/mix/missing.hrx new file mode 100644 index 0000000000..e3fd25c166 --- /dev/null +++ b/spec/core_functions/color/mix/missing.hrx @@ -0,0 +1,231 @@ +<===> explicit/same/legacy/color1/input.scss +@use 'sass:color'; +a {b: color.mix(rgb(none 100 200), rgb(200 100 0), $method: rgb)} + +<===> explicit/same/legacy/color1/output.css +a { + b: #c86464; +} + +<===> +================================================================================ +<===> explicit/same/legacy/color2/input.scss +@use 'sass:color'; +a {b: color.mix(rgb(0 100 200), rgb(200 none 0), $method: rgb)} + +<===> explicit/same/legacy/color2/output.css +a { + b: #646464; +} + +<===> +================================================================================ +<===> explicit/same/legacy/both/input.scss +@use 'sass:color'; +a {b: color.mix(rgb(0 none 200), rgb(200 none 0), $method: rgb)} + +<===> explicit/same/legacy/both/output.css +a { + b: rgb(100 none 100); +} + +<===> +================================================================================ +<===> explicit/same/modern/color1/input.scss +@use 'sass:color'; +a { + b: color.mix( + color(srgb none 0.1 0.2), + color(srgb 0.1 0.2 0.3), + $method: srgb + ); +} + +<===> explicit/same/modern/color1/output.css +a { + b: color(srgb 0.1 0.15 0.25); +} + +<===> +================================================================================ +<===> explicit/same/modern/color2/input.scss +@use 'sass:color'; +a { + b: color.mix( + color(srgb 0.1 0.2 0.3), + color(srgb 0.1 none 0.2), + $method: srgb + ); +} + +<===> explicit/same/modern/color2/output.css +a { + b: color(srgb 0.1 0.2 0.25); +} + +<===> +================================================================================ +<===> explicit/same/modern/both/input.scss +@use 'sass:color'; +a { + b: color.mix( + color(srgb 0.1 0.2 none), + color(srgb 0.3 0.2 none), + $method: srgb + ); +} + +<===> explicit/same/modern/both/output.css +a { + b: color(srgb 0.2 0.2 none); +} + +<===> +================================================================================ +<===> explicit/analogous/legacy/color1/input.scss +@use 'sass:color'; +a {b: color.mix(rgb(none 100 200), rgb(200 100 0), $method: rec2020)} + +<===> explicit/analogous/legacy/color1/output.css +a { + b: rgb(199.7671172587, 91.8239078594, 117.7284104313); +} + +<===> +================================================================================ +<===> explicit/analogous/legacy/color2/input.scss +@use 'sass:color'; +a {b: color.mix(rgb(0 100 200), rgb(200 none 0), $method: rec2020)} + +<===> explicit/analogous/legacy/color2/output.css +a { + b: rgb(128.6114294932, 95.678836923, 112.8090426091); +} + +<===> +================================================================================ +<===> explicit/analogous/legacy/both/input.scss +@use 'sass:color'; +a {b: color.mix(rgb(0 none 200), rgb(200 none 0), $method: rec2020)} + +<===> explicit/analogous/legacy/both/output.css +a { + b: rgb(129.0248146672, 0, 115.9531222724); +} + +<===> +================================================================================ +<===> explicit/analogous/modern/color1/input.scss +@use 'sass:color'; +a { + b: color.mix( + color(srgb none 0.1 0.2), + color(srgb 0.1 0.2 0.3), + $method: rec2020 + ); +} + +<===> explicit/analogous/modern/color1/output.css +a { + b: color(srgb 0.146201736 0.1492595622 0.2497768167); +} + +<===> +================================================================================ +<===> explicit/analogous/modern/color2/input.scss +@use 'sass:color'; +a { + b: color.mix( + color(srgb 0.1 0.2 0.3), + color(srgb 0.1 none 0.2), + $method: rec2020 + ); +} + +<===> explicit/analogous/modern/color2/output.css +a { + b: color(srgb 0.0134568276 0.2030946777 0.2456679982); +} + +<===> +================================================================================ +<===> explicit/analogous/modern/both/input.scss +@use 'sass:color'; +a { + b: color.mix( + color(srgb 0.1 0.2 none), + color(srgb 0.3 0.2 none), + $method: rec2020 + ); +} + +<===> explicit/analogous/modern/both/output.css +a { + b: color(srgb 0.2110804397 0.2012136757 none); +} + +<===> +================================================================================ +<===> powerless/legacy/color1/input.scss +@use 'sass:color'; +a {b: color.mix(hsl(0deg 0% 30%), hsl(120deg 50% 50%), $method: lch)} + +<===> powerless/legacy/color1/output.css +a { + b: hsl(113.4583259264, 28.061366187%, 40.5877359835%); +} + +<===> +================================================================================ +<===> powerless/legacy/color2/input.scss +@use 'sass:color'; +a {b: color.mix(hsl(120deg 50% 50%), hsl(0deg 0% 30%), $method: lch)} + +<===> powerless/legacy/color2/output.css +a { + b: hsl(113.4583259264, 28.061366187%, 40.5877359835%); +} + +<===> +================================================================================ +<===> powerless/legacy/both/input.scss +@use 'sass:color'; +a {b: color.mix(hsl(120deg 0% 50%), hsl(0deg 0% 30%), $method: lch)} + +<===> powerless/legacy/both/output.css +a { + b: hsl(0, 0%, 39.7779408276%); +} + +<===> +================================================================================ +<===> powerless/modern/color1/input.scss +@use 'sass:color'; +a {b: color.mix(lch(30% 0% 0deg), lch(50% 10% 120deg), $method: hsl)} + +<===> powerless/modern/color1/output.css +a { + b: lch(39.8551054023% 6.455971398 120.4338354849deg); +} + +<===> +================================================================================ +<===> powerless/modern/color2/input.scss +@use 'sass:color'; +a {b: color.mix(lch(50% 10% 120deg), lch(30% 0% 0deg), $method: hsl)} + +<===> powerless/modern/color2/output.css +a { + b: lch(39.8551054023% 6.455971398 120.4338354849deg); +} + +<===> +================================================================================ +<===> powerless/modern/both/input.scss +@use 'sass:color'; +a {b: color.mix(lch(50% 0% 120deg), lch(30% 0% 0deg), $method: hsl)} + +<===> powerless/modern/both/output.css +a { + b: lch(40.2238896861% 0 none); +} diff --git a/spec/core_functions/color/oklab/alpha.hrx b/spec/core_functions/color/oklab/alpha.hrx index ee7f24dac2..9addc41b23 100644 --- a/spec/core_functions/color/oklab/alpha.hrx +++ b/spec/core_functions/color/oklab/alpha.hrx @@ -48,6 +48,45 @@ a { channels: 1% 2 3 / 0.4; } +<===> +================================================================================ +<===> degenerate/positive_infinity/input.scss +@use 'core_functions/color/utils'; +@include utils.inspect(oklab(1% 2 -3 / calc(infinity))); + +<===> degenerate/positive_infinity/output.css +a { + value: oklab(1% 2 -3); + space: oklab; + channels: 1% 2 -3 / 1; +} + +<===> +================================================================================ +<===> degenerate/negative_infinity/input.scss +@use 'core_functions/color/utils'; +@include utils.inspect(oklab(1% 2 -3 / calc(-infinity))); + +<===> degenerate/negative_infinity/output.css +a { + value: oklab(1% 2 -3 / 0); + space: oklab; + channels: 1% 2 -3 / 0; +} + +<===> +================================================================================ +<===> degenerate/nan/input.scss +@use 'core_functions/color/utils'; +@include utils.inspect(oklab(1% 2 -3 / calc(NaN))); + +<===> degenerate/nan/output.css +a { + value: oklab(1% 2 -3 / 0); + space: oklab; + channels: 1% 2 -3 / 0; +} + <===> ================================================================================ <===> named/input.scss diff --git a/spec/core_functions/color/oklab/no_alpha.hrx b/spec/core_functions/color/oklab/no_alpha.hrx index 21698a935a..cc39abb303 100644 --- a/spec/core_functions/color/oklab/no_alpha.hrx +++ b/spec/core_functions/color/oklab/no_alpha.hrx @@ -35,6 +35,84 @@ a { channels: 1% -126 -300 / 1; } +<===> +================================================================================ +<===> unitless/a/degenerate/positive_infinity/input.scss +@use 'core_functions/color/utils'; +@include utils.inspect(oklab(1% calc(infinity) -300)); + +<===> unitless/a/degenerate/positive_infinity/output.css +a { + value: oklab(1% calc(infinity) -300); + space: oklab; + channels: 1% calc(infinity) -300 / 1; +} + +<===> +================================================================================ +<===> unitless/a/degenerate/negative_infinity/input.scss +@use 'core_functions/color/utils'; +@include utils.inspect(oklab(1% calc(-infinity) -300)); + +<===> unitless/a/degenerate/negative_infinity/output.css +a { + value: oklab(1% calc(-infinity) -300); + space: oklab; + channels: 1% calc(-infinity) -300 / 1; +} + +<===> +================================================================================ +<===> unitless/a/degenerate/nan/input.scss +@use 'core_functions/color/utils'; +@include utils.inspect(oklab(1% calc(NaN) -300)); + +<===> unitless/a/degenerate/nan/output.css +a { + value: oklab(1% calc(NaN) -300); + space: oklab; + channels: 1% calc(NaN) -300 / 1; +} + +<===> +================================================================================ +<===> unitless/b/degenerate/positive_infinity/input.scss +@use 'core_functions/color/utils'; +@include utils.inspect(oklab(1% 2 calc(infinity))); + +<===> unitless/b/degenerate/positive_infinity/output.css +a { + value: oklab(1% 2 calc(infinity)); + space: oklab; + channels: 1% 2 calc(infinity) / 1; +} + +<===> +================================================================================ +<===> unitless/b/degenerate/negative_infinity/input.scss +@use 'core_functions/color/utils'; +@include utils.inspect(oklab(1% 2 calc(-infinity))); + +<===> unitless/b/degenerate/negative_infinity/output.css +a { + value: oklab(1% 2 calc(-infinity)); + space: oklab; + channels: 1% 2 calc(-infinity) / 1; +} + +<===> +================================================================================ +<===> unitless/b/degenerate/nan/input.scss +@use 'core_functions/color/utils'; +@include utils.inspect(oklab(1% 2 calc(NaN))); + +<===> unitless/b/degenerate/nan/output.css +a { + value: oklab(1% 2 calc(NaN)); + space: oklab; + channels: 1% 2 calc(NaN) / 1; +} + <===> ================================================================================ <===> unitless/lightness/in_range/input.scss @@ -74,6 +152,45 @@ a { channels: 0% 2 3 / 1; } +<===> +================================================================================ +<===> unitless/lightness/degenerate/positive_infinity/input.scss +@use 'core_functions/color/utils'; +@include utils.inspect(oklab(calc(infinity) 2 -3)); + +<===> unitless/lightness/degenerate/positive_infinity/output.css +a { + value: oklab(100% 2 -3); + space: oklab; + channels: 100% 2 -3 / 1; +} + +<===> +================================================================================ +<===> unitless/lightness/degenerate/negative_infinity/input.scss +@use 'core_functions/color/utils'; +@include utils.inspect(oklab(calc(-infinity) 2 -3)); + +<===> unitless/lightness/degenerate/negative_infinity/output.css +a { + value: oklab(0% 2 -3); + space: oklab; + channels: 0% 2 -3 / 1; +} + +<===> +================================================================================ +<===> unitless/lightness/degenerate/nan/input.scss +@use 'core_functions/color/utils'; +@include utils.inspect(oklab(calc(NaN) 2 -3)); + +<===> unitless/lightness/degenerate/nan/output.css +a { + value: oklab(0% 2 -3); + space: oklab; + channels: 0% 2 -3 / 1; +} + <===> ================================================================================ <===> percent/ab/in_range/input.scss diff --git a/spec/core_functions/color/oklch/alpha.hrx b/spec/core_functions/color/oklch/alpha.hrx index 8ac85be2fa..7209e0ab8c 100644 --- a/spec/core_functions/color/oklch/alpha.hrx +++ b/spec/core_functions/color/oklch/alpha.hrx @@ -48,6 +48,45 @@ a { channels: 1% 0.2 3deg / 0.4; } +<===> +================================================================================ +<===> degenerate/positive_infinity/input.scss +@use 'core_functions/color/utils'; +@include utils.inspect(oklch(1% 0.2 3deg / calc(infinity))); + +<===> degenerate/positive_infinity/output.css +a { + value: oklch(1% 0.2 3deg); + space: oklch; + channels: 1% 0.2 3deg / 1; +} + +<===> +================================================================================ +<===> degenerate/negative_infinity/input.scss +@use 'core_functions/color/utils'; +@include utils.inspect(oklch(1% 0.2 3deg / calc(-infinity))); + +<===> degenerate/negative_infinity/output.css +a { + value: oklch(1% 0.2 3deg / 0); + space: oklch; + channels: 1% 0.2 3deg / 0; +} + +<===> +================================================================================ +<===> degenerate/nan/input.scss +@use 'core_functions/color/utils'; +@include utils.inspect(oklch(1% 0.2 3deg / calc(NaN))); + +<===> degenerate/nan/output.css +a { + value: oklch(1% 0.2 3deg / 0); + space: oklch; + channels: 1% 0.2 3deg / 0; +} + <===> ================================================================================ <===> named/input.scss diff --git a/spec/core_functions/color/oklch/no_alpha.hrx b/spec/core_functions/color/oklch/no_alpha.hrx index 2c8c27848a..851b8f73eb 100644 --- a/spec/core_functions/color/oklch/no_alpha.hrx +++ b/spec/core_functions/color/oklch/no_alpha.hrx @@ -35,6 +35,45 @@ a { channels: 0% 0.2 3deg / 1; } +<===> +================================================================================ +<===> unitless/lightness/degenerate/positive_infinity/input.scss +@use 'core_functions/color/utils'; +@include utils.inspect(oklch(calc(infinity) 0.2 3deg)); + +<===> unitless/lightness/degenerate/positive_infinity/output.css +a { + value: oklch(100% 0.2 3deg); + space: oklch; + channels: 100% 0.2 3deg / 1; +} + +<===> +================================================================================ +<===> unitless/lightness/degenerate/negative_infinity/input.scss +@use 'core_functions/color/utils'; +@include utils.inspect(oklch(calc(-infinity) 0.2 3deg)); + +<===> unitless/lightness/degenerate/negative_infinity/output.css +a { + value: oklch(0% 0.2 3deg); + space: oklch; + channels: 0% 0.2 3deg / 1; +} + +<===> +================================================================================ +<===> unitless/lightness/degenerate/nan/input.scss +@use 'core_functions/color/utils'; +@include utils.inspect(oklch(calc(NaN) 0.2 3deg)); + +<===> unitless/lightness/degenerate/nan/output.css +a { + value: oklch(0% 0.2 3deg); + space: oklch; + channels: 0% 0.2 3deg / 1; +} + <===> ================================================================================ <===> unitless/chroma/above_range/input.scss @@ -61,6 +100,45 @@ a { channels: 1% 0 3deg / 1; } +<===> +================================================================================ +<===> unitless/chroma/degenerate/positive_infinity/input.scss +@use 'core_functions/color/utils'; +@include utils.inspect(oklch(1% calc(infinity) 3deg)); + +<===> unitless/chroma/degenerate/positive_infinity/output.css +a { + value: oklch(1% calc(infinity) 3deg); + space: oklch; + channels: 1% calc(infinity) 3deg / 1; +} + +<===> +================================================================================ +<===> unitless/chroma/degenerate/negative_infinity/input.scss +@use 'core_functions/color/utils'; +@include utils.inspect(oklch(1% calc(-infinity) 3deg)); + +<===> unitless/chroma/degenerate/negative_infinity/output.css +a { + value: oklch(1% 0 3deg); + space: oklch; + channels: 1% 0 3deg / 1; +} + +<===> +================================================================================ +<===> unitless/chroma/degenerate/nan/input.scss +@use 'core_functions/color/utils'; +@include utils.inspect(oklch(1% calc(NaN) 3deg)); + +<===> unitless/chroma/degenerate/nan/output.css +a { + value: oklch(1% 0 3deg); + space: oklch; + channels: 1% 0 3deg / 1; +} + <===> ================================================================================ <===> unitless/hue/above_range/input.scss @@ -87,6 +165,45 @@ a { channels: 1% 0.2 359deg / 1; } +<===> +================================================================================ +<===> unitless/hue/degenerate/positive_infinity/input.scss +@use 'core_functions/color/utils'; +@include utils.inspect(oklch(1% 2 calc(infinity))); + +<===> unitless/hue/degenerate/positive_infinity/output.css +a { + value: oklch(1% 2 calc(NaN * 1deg)); + space: oklch; + channels: 1% 2 calc(NaN * 1deg) / 1; +} + +<===> +================================================================================ +<===> unitless/hue/degenerate/negative_infinity/input.scss +@use 'core_functions/color/utils'; +@include utils.inspect(oklch(1% 2 calc(-infinity))); + +<===> unitless/hue/degenerate/negative_infinity/output.css +a { + value: oklch(1% 2 calc(NaN * 1deg)); + space: oklch; + channels: 1% 2 calc(NaN * 1deg) / 1; +} + +<===> +================================================================================ +<===> unitless/hue/degenerate/nan/input.scss +@use 'core_functions/color/utils'; +@include utils.inspect(oklch(1% 2 calc(NaN))); + +<===> unitless/hue/degenerate/nan/output.css +a { + value: oklch(1% 2 calc(NaN * 1deg)); + space: oklch; + channels: 1% 2 calc(NaN * 1deg) / 1; +} + <===> ================================================================================ <===> percent/in_range/input.scss diff --git a/spec/core_functions/color/red.hrx b/spec/core_functions/color/red.hrx index b20dfc2006..72ec4515e2 100644 --- a/spec/core_functions/color/red.hrx +++ b/spec/core_functions/color/red.hrx @@ -134,3 +134,17 @@ Error: $color: 1 is not a color. | ^^^^^^ ' input.scss 1:7 root stylesheet + +<===> +================================================================================ +<===> error/non_legacy/input.scss +@use 'sass:color'; +a {b: color.red(color(srgb 1 1 1))} + +<===> error/non_legacy/error +Error: color.red() is only supported for legacy colors. Please use color.channel() instead with an explicit $space argument. + , +2 | a {b: color.red(color(srgb 1 1 1))} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet diff --git a/spec/core_functions/color/rgb/four_args/clamped.hrx b/spec/core_functions/color/rgb/four_args/clamped.hrx index ea4e6788df..d59ef5025e 100644 --- a/spec/core_functions/color/rgb/four_args/clamped.hrx +++ b/spec/core_functions/color/rgb/four_args/clamped.hrx @@ -3,34 +3,124 @@ Channels that are out of bounds are clamped within bounds. <===> ================================================================================ -<===> red/input.scss +<===> red/finite/input.scss a {b: rgb(256, 0, 0, 0.5)} -<===> red/output.css +<===> red/finite/output.css a { b: rgba(255, 0, 0, 0.5); } <===> ================================================================================ -<===> green/input.scss +<===> red/degenerate/positive_infinity/input.scss +a {b: rgb(calc(infinity), 0, 0, 0.5)} + +<===> red/degenerate/positive_infinity/output.css +a { + b: rgba(255, 0, 0, 0.5); +} + +<===> +================================================================================ +<===> red/degenerate/negative_infinity/input.scss +a {b: rgb(calc(-infinity), 0, 0, 0.5)} + +<===> red/degenerate/negative_infinity/output.css +a { + b: rgba(0, 0, 0, 0.5); +} + +<===> +================================================================================ +<===> red/degenerate/nan/input.scss +a {b: rgb(calc(NaN), 0, 0, 0.5)} + +<===> red/degenerate/nan/output.css +a { + b: rgba(0, 0, 0, 0.5); +} + +<===> +================================================================================ +<===> green/finite/input.scss a {b: rgb(0, -1, 0, 0.5)} -<===> green/output.css +<===> green/finite/output.css +a { + b: rgba(0, 0, 0, 0.5); +} + +<===> +================================================================================ +<===> green/degenerate/positive_infinity/input.scss +a {b: rgb(0, calc(infinity), 0, 0.5)} + +<===> green/degenerate/positive_infinity/output.css +a { + b: rgba(0, 255, 0, 0.5); +} + +<===> +================================================================================ +<===> green/degenerate/negative_infinity/input.scss +a {b: rgb(0, calc(-infinity), 0, 0.5)} + +<===> green/degenerate/negative_infinity/output.css +a { + b: rgba(0, 0, 0, 0.5); +} + +<===> +================================================================================ +<===> green/degenerate/nan/input.scss +a {b: rgb(0, calc(NaN), 0, 0.5)} + +<===> green/degenerate/nan/output.css a { b: rgba(0, 0, 0, 0.5); } <===> ================================================================================ -<===> blue/input.scss +<===> blue/finite/input.scss a {b: rgb(0, 0, 9999, 0.5)} -<===> blue/output.css +<===> blue/finite/output.css a { b: rgba(0, 0, 255, 0.5); } +<===> +================================================================================ +<===> blue/degenerate/positive_infinity/input.scss +a {b: rgb(0, 0, calc(infinity), 0.5)} + +<===> blue/degenerate/positive_infinity/output.css +a { + b: rgba(0, 0, 255, 0.5); +} + +<===> +================================================================================ +<===> blue/degenerate/negative_infinity/input.scss +a {b: rgb(0, 0, calc(-infinity), 0.5)} + +<===> blue/degenerate/negative_infinity/output.css +a { + b: rgba(0, 0, 0, 0.5); +} + +<===> +================================================================================ +<===> blue/degenerate/nan/input.scss +a {b: rgb(0, 0, calc(NaN), 0.5)} + +<===> blue/degenerate/nan/output.css +a { + b: rgba(0, 0, 0, 0.5); +} + <===> ================================================================================ <===> alpha/above/input.scss @@ -51,3 +141,32 @@ a { b: rgba(0, 0, 0, 0); } +<===> +================================================================================ +<===> alpha/degenerate/positive_infinity/input.scss +a {b: rgb(0, 0, 0, calc(infinity))} + +<===> alpha/degenerate/positive_infinity/output.css +a { + b: rgb(0, 0, 0); +} + +<===> +================================================================================ +<===> alpha/degenerate/negative_infinity/input.scss +a {b: rgb(0, 0, 0, calc(-infinity))} + +<===> alpha/degenerate/negative_infinity/output.css +a { + b: rgba(0, 0, 0, 0); +} + +<===> +================================================================================ +<===> alpha/degenerate/nan/input.scss +a {b: rgb(0, 0, 0, calc(NaN))} + +<===> alpha/degenerate/nan/output.css +a { + b: rgba(0, 0, 0, 0); +} diff --git a/spec/core_functions/color/saturate.hrx b/spec/core_functions/color/saturate.hrx index 1229cd662c..c5c9cbf8a5 100644 --- a/spec/core_functions/color/saturate.hrx +++ b/spec/core_functions/color/saturate.hrx @@ -334,3 +334,16 @@ Error: $amount: Expected 100.001 to be within 0 and 100. | ^^^^^^^^^^^^^^^^^^^^^^^ ' input.scss 1:7 root stylesheet + +<===> +================================================================================ +<===> error/non_legacy/input.scss +a {b: saturate(color(srgb 1 1 1), 10%)} + +<===> error/non_legacy/error +Error: saturate() is only supported for legacy colors. Please use color.adjust() instead with an explicit $space argument. + , +1 | a {b: saturate(color(srgb 1 1 1), 10%)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 1:7 root stylesheet diff --git a/spec/core_functions/color/saturation.hrx b/spec/core_functions/color/saturation.hrx index e1cc6b35ca..b1c4802b47 100644 --- a/spec/core_functions/color/saturation.hrx +++ b/spec/core_functions/color/saturation.hrx @@ -157,3 +157,17 @@ Error: $color: 1 is not a color. | ^^^^^^^^^^^^^ ' input.scss 1:7 root stylesheet + +<===> +================================================================================ +<===> error/non_legacy/input.scss +@use 'sass:color'; +a {b: color.saturation(color(srgb 1 1 1))} + +<===> error/non_legacy/error +Error: color.saturation() is only supported for legacy colors. Please use color.channel() instead with an explicit $space argument. + , +2 | a {b: color.saturation(color(srgb 1 1 1))} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet diff --git a/spec/core_functions/color/scale/error/missing.hrx b/spec/core_functions/color/scale/error/missing.hrx new file mode 100644 index 0000000000..5d964eda3e --- /dev/null +++ b/spec/core_functions/color/scale/error/missing.hrx @@ -0,0 +1,39 @@ +<===> legacy/input.scss +@use 'sass:color'; +a {b: color.scale(rgb(none 0 0), $red: 10%)} + +<===> legacy/error +Error: $red: Because the CSS working group is still deciding on the best behavior, Sass doesn't currently support modifying missing channels (color: rgb(none 0 0)). + , +2 | a {b: color.scale(rgb(none 0 0), $red: 10%)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> modern/input.scss +@use 'sass:color'; +a {b: color.scale(lab(none 0 0), $lightness: 10%, $space: lab)} + +<===> modern/error +Error: $lightness: Because the CSS working group is still deciding on the best behavior, Sass doesn't currently support modifying missing channels (color: lab(none 0 0)). + , +2 | a {b: color.scale(lab(none 0 0), $lightness: 10%, $space: lab)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> alpha/input.scss +@use 'sass:color'; +a {b: color.scale(rgb(0 0 0 / none), $alpha: 10%)} + +<===> alpha/error +Error: $alpha: Because the CSS working group is still deciding on the best behavior, Sass doesn't currently support modifying missing channels (color: rgb(0 0 0 / none)). + , +2 | a {b: color.scale(rgb(0 0 0 / none), $alpha: 10%)} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet diff --git a/spec/core_functions/color/scale/no_channels.hrx b/spec/core_functions/color/scale/no_channels.hrx index 8758389ad3..52280d0d1c 100644 --- a/spec/core_functions/color/scale/no_channels.hrx +++ b/spec/core_functions/color/scale/no_channels.hrx @@ -17,3 +17,14 @@ a {b: color.scale(oklch(50% 0 0deg), $space: lab)} a { b: oklch(50% 0 none); } + +<===> +================================================================================ +<===> missing/input.scss +@use 'sass:color'; +a {b: color.scale(rgb(none none none))} + +<===> missing/output.css +a { + b: rgb(none none none); +} diff --git a/spec/core_functions/color/scale/space.hrx b/spec/core_functions/color/scale/space.hrx index df196933ad..31dd144ed8 100644 --- a/spec/core_functions/color/scale/space.hrx +++ b/spec/core_functions/color/scale/space.hrx @@ -39,3 +39,102 @@ a {b: color.scale(lab(50% 10 -20), $chroma: 20%, $space: oklch)} a { b: lab(48.9487508713% 24.2085150873 -41.732226413); } + +<===> +================================================================================ +<===> powerless/legacy/input.scss +@use 'sass:color'; +a {b: color.scale(hsl(0deg 0% 50%), $space: lab)} + +<===> powerless/legacy/output.css +a { + b: hsl(0, 0%, 50%); +} + +<===> +================================================================================ +<===> powerless/modern/input.scss +@use 'sass:color'; +a {b: color.scale(oklch(50% 0 0deg), $space: lab)} + +<===> powerless/modern/output.css +a { + b: oklch(50% 0 none); +} + +<===> +================================================================================ +<===> missing/legacy/same/implicit/input.scss +@use 'sass:color'; +a {b: color.scale(rgb(none none none))} + +<===> missing/legacy/same/implicit/output.css +a { + b: rgb(none none none); +} + +<===> +================================================================================ +<===> missing/legacy/same/explicit/input.scss +@use 'sass:color'; +a {b: color.scale(rgb(none none none), $space: rgb)} + +<===> missing/legacy/same/explicit/output.css +a { + b: rgb(none none none); +} + +<===> +================================================================================ +<===> missing/legacy/analogous/legacy/input.scss +@use 'sass:color'; +a {b: color.scale(hsl(none 50% 50%), $space: hwb)} + +<===> missing/legacy/analogous/legacy/output.css +a { + b: hsl(0, 50%, 50%); +} + +<===> +================================================================================ +<===> missing/legacy/analogous/modern/input.scss +@use 'sass:color'; +a {b: color.scale(rgb(none none none), $space: display-p3)} + +<===> missing/legacy/analogous/modern/output.css +a { + b: black; +} + +<===> +================================================================================ +<===> missing/modern/same/implicit/input.scss +@use 'sass:color'; +a {b: color.scale(color(srgb none none none))} + +<===> missing/modern/same/implicit/output.css +a { + b: color(srgb none none none); +} + +<===> +================================================================================ +<===> missing/modern/same/explicit/input.scss +@use 'sass:color'; +a {b: color.scale(color(srgb none none none), $space: srgb)} + +<===> missing/modern/same/explicit/output.css +a { + b: color(srgb none none none); +} + +<===> +================================================================================ +<===> missing/modern/analogous/input.scss +@use 'sass:color'; +a {b: color.scale(color(srgb none none none), $space: display-p3)} + +<===> missing/modern/analogous/output.css +a { + b: color(srgb none none none); +} diff --git a/spec/core_functions/color/to_gamut/space.hrx b/spec/core_functions/color/to_gamut/space.hrx index c10a8170dc..45f7ac5145 100644 --- a/spec/core_functions/color/to_gamut/space.hrx +++ b/spec/core_functions/color/to_gamut/space.hrx @@ -18,6 +18,160 @@ a { b: oklch(60.4068473688% 0.1443906201 242.3895382399deg); } +<===> +================================================================================ +<===> clip/missing/legacy/same/implicit/input.scss +@use 'sass:color'; +a {b: color.to-gamut(rgb(none none none), $method: clip)} + +<===> clip/missing/legacy/same/implicit/output.css +a { + b: rgb(none none none); +} + +<===> +================================================================================ +<===> clip/missing/legacy/same/explicit/input.scss +@use 'sass:color'; +a {b: color.to-gamut(rgb(none none none), $space: rgb, $method: clip)} + +<===> clip/missing/legacy/same/explicit/output.css +a { + b: rgb(none none none); +} + +<===> +================================================================================ +<===> clip/missing/legacy/same/with_mapping/input.scss +@use 'sass:color'; +a { + b: color.to-gamut( + color.change(rgb(none 0 none), $green: 300), + $method: clip + ); +} + +<===> clip/missing/legacy/same/with_mapping/output.css +a { + b: rgb(none 255 none); +} + +<===> +================================================================================ +<===> clip/missing/legacy/analogous/legacy/input.scss +@use 'sass:color'; +a {b: color.to-gamut(hsl(none 50% 50%), $space: hwb, $method: clip)} + +<===> clip/missing/legacy/analogous/legacy/output.css +a { + b: hsl(0, 50%, 50%); +} + +<===> +================================================================================ +<===> clip/missing/legacy/analogous/modern/input.scss +@use 'sass:color'; +a {b: color.to-gamut(rgb(none none none), $space: display-p3, $method: clip)} + +<===> clip/missing/legacy/analogous/modern/output.css +a { + b: black; +} + +<===> +================================================================================ +<===> clip/missing/modern/same/implicit/input.scss +@use 'sass:color'; +a {b: color.to-gamut(color(srgb none none none), $method: clip)} + +<===> clip/missing/modern/same/implicit/output.css +a { + b: color(srgb none none none); +} + +<===> +================================================================================ +<===> clip/missing/modern/same/explicit/input.scss +@use 'sass:color'; +a {b: color.to-gamut(color(srgb none none none), $space: srgb, $method: clip)} + +<===> clip/missing/modern/same/explicit/output.css +a { + b: color(srgb none none none); +} + +<===> +================================================================================ +<===> clip/missing/modern/same/with_mapping/input.scss +@use 'sass:color'; +a {b: color.to-gamut(color(srgb none 1.2 none), $method: clip)} + +<===> clip/missing/modern/same/with_mapping/output.css +a { + b: color(srgb none 1 none); +} + +<===> +================================================================================ +<===> clip/missing/modern/analogous/input.scss +@use 'sass:color'; +a { + b: color.to-gamut( + color(srgb none none none), + $space: display-p3, + $method: clip + ); +} + +<===> clip/missing/modern/analogous/output.css +a { + b: color(srgb none none none); +} + +<===> +================================================================================ +<===> clip/powerless/legacy/no_mapping/input.scss +@use 'sass:color'; +a {b: color.to-gamut(hsl(0deg 0% 20%), $space: srgb, $method: clip)} + +<===> clip/powerless/legacy/no_mapping/output.css +a { + b: hsl(0, 0%, 20%); +} + +<===> +================================================================================ +<===> clip/powerless/legacy/with_mapping/input.scss +@use 'sass:color'; +a {b: color.to-gamut(hsl(0deg 10% 1000%), $space: srgb, $method: clip)} + +<===> clip/powerless/legacy/with_mapping/output.css +a { + b: hsl(0, 0%, 100%); +} + +<===> +================================================================================ +<===> clip/powerless/modern/no_mapping/input.scss +@use 'sass:color'; +a {b: color.to-gamut(oklch(10% 0% 0deg), $space: srgb, $method: clip)} + +<===> clip/powerless/modern/no_mapping/output.css +a { + b: oklch(10% 0 none); +} + +<===> +================================================================================ +<===> clip/powerless/modern/with_mapping/input.scss +@use 'sass:color'; +a {b: color.to-gamut(lch(1000% 10% 0deg), $space: hsl, $method: clip)} + +<===> clip/powerless/modern/with_mapping/output.css +a { + b: lch(100% 0 none); +} + <===> ================================================================================ <===> local_minde/in_gamut/input.scss @@ -61,3 +215,169 @@ a {b: color.to-gamut(oklch(0% 0.13 240deg), $space: rgb, $method: local-minde)} a { b: oklch(0% 0 none); } + +<===> +================================================================================ +<===> local_minde/missing/legacy/same/implicit/input.scss +@use 'sass:color'; +a {b: color.to-gamut(rgb(none none none), $method: local-minde)} + +<===> local_minde/missing/legacy/same/implicit/output.css +a { + b: rgb(none none none); +} + +<===> +================================================================================ +<===> local_minde/missing/legacy/same/explicit/input.scss +@use 'sass:color'; +a {b: color.to-gamut(rgb(none none none), $space: rgb, $method: local-minde)} + +<===> local_minde/missing/legacy/same/explicit/output.css +a { + b: rgb(none none none); +} + +<===> +================================================================================ +<===> local_minde/missing/legacy/same/with_mapping/input.scss +@use 'sass:color'; +a { + b: color.to-gamut( + color.change(rgb(none 0 none), $green: 300), + $method: local-minde + ); +} + +<===> local_minde/missing/legacy/same/with_mapping/output.css +a { + b: rgb(220.0210985908, 255, 215.6454599021); +} + +<===> +================================================================================ +<===> local_minde/missing/legacy/analogous/legacy/input.scss +@use 'sass:color'; +a {b: color.to-gamut(hsl(none 50% 50%), $space: hwb, $method: local-minde)} + +<===> local_minde/missing/legacy/analogous/legacy/output.css +a { + b: hsl(0, 50%, 50%); +} + +<===> +================================================================================ +<===> local_minde/missing/legacy/analogous/modern/input.scss +@use 'sass:color'; +a { + b: color.to-gamut( + rgb(none none none), + $space: display-p3, + $method: local-minde + ); +} + +<===> local_minde/missing/legacy/analogous/modern/output.css +a { + b: black; +} + +<===> +================================================================================ +<===> local_minde/missing/modern/same/implicit/input.scss +@use 'sass:color'; +a {b: color.to-gamut(color(srgb none none none), $method: local-minde)} + +<===> local_minde/missing/modern/same/implicit/output.css +a { + b: color(srgb none none none); +} + +<===> +================================================================================ +<===> local_minde/missing/modern/same/explicit/input.scss +@use 'sass:color'; +a { + b: color.to-gamut( + color(srgb none none none), + $space: srgb, + $method: local-minde + ); +} + +<===> local_minde/missing/modern/same/explicit/output.css +a { + b: color(srgb none none none); +} + +<===> +================================================================================ +<===> local_minde/missing/modern/same/with_mapping/input.scss +@use 'sass:color'; +a {b: color.to-gamut(color(srgb none 1.2 none), $method: local-minde)} + +<===> local_minde/missing/modern/same/with_mapping/output.css +a { + b: color(srgb 0.9249489323 1 0.9135716721); +} + +<===> +================================================================================ +<===> local_minde/missing/modern/analogous/input.scss +@use 'sass:color'; +a { + b: color.to-gamut( + color(srgb none none none), + $space: display-p3, + $method: local-minde + ); +} + +<===> local_minde/missing/modern/analogous/output.css +a { + b: color(srgb none none none); +} + +<===> +================================================================================ +<===> local_minde/powerless/legacy/no_mapping/input.scss +@use 'sass:color'; +a {b: color.to-gamut(hsl(0deg 0% 20%), $space: srgb, $method: local-minde)} + +<===> local_minde/powerless/legacy/no_mapping/output.css +a { + b: hsl(0, 0%, 20%); +} + +<===> +================================================================================ +<===> local_minde/powerless/legacy/with_mapping/input.scss +@use 'sass:color'; +a {b: color.to-gamut(hsl(0deg 10% 1000%), $space: srgb, $method: local-minde)} + +<===> local_minde/powerless/legacy/with_mapping/output.css +a { + b: hsl(0, 0%, 100%); +} + +<===> +================================================================================ +<===> local_minde/powerless/modern/no_mapping/input.scss +@use 'sass:color'; +a {b: color.to-gamut(oklch(10% 0% 0deg), $space: srgb, $method: local-minde)} + +<===> local_minde/powerless/modern/no_mapping/output.css +a { + b: oklch(10% 0 none); +} + +<===> +================================================================================ +<===> local_minde/powerless/modern/with_mapping/input.scss +@use 'sass:color'; +a {b: color.to-gamut(lch(1000% 10% 0deg), $space: srgb, $method: local-minde)} + +<===> local_minde/powerless/modern/with_mapping/output.css +a { + b: lch(100% 0 none); +} diff --git a/spec/core_functions/color/whiteness.hrx b/spec/core_functions/color/whiteness.hrx index 0a36e3c608..53788ed4a5 100644 --- a/spec/core_functions/color/whiteness.hrx +++ b/spec/core_functions/color/whiteness.hrx @@ -213,3 +213,17 @@ Error: $color: 1 is not a color. | ^^^^^^^^^^^^^^^^^^ ' input.scss 2:7 root stylesheet + +<===> +================================================================================ +<===> error/non_legacy/input.scss +@use 'sass:color'; +a {b: color.whiteness(color(srgb 1 1 1))} + +<===> error/non_legacy/error +Error: color.whiteness() is only supported for legacy colors. Please use color.channel() instead with an explicit $space argument. + , +2 | a {b: color.whiteness(color(srgb 1 1 1))} + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + ' + input.scss 2:7 root stylesheet