Skip to content

Commit

Permalink
Update grayscale specs to match other spec styles (#1991)
Browse files Browse the repository at this point in the history
  • Loading branch information
@nex3
nex3 committed May 10, 2024
1 parent 916302c commit a92cec7
Showing 1 changed file with 95 additions and 60 deletions.
155 changes: 95 additions & 60 deletions spec/core_functions/color/grayscale.hrx
View file
Original file line number Diff line number Diff line change
@@ -1,188 +1,223 @@
<===> no_saturation/white/input.scss
a {b: grayscale(white)}
<===> legacy/no_saturation/white/input.scss
@use 'sass:color';
a {b: color.grayscale(white)}

<===> no_saturation/white/output.css
<===> legacy/no_saturation/white/output.css
a {
b: white;
}

<===>
================================================================================
<===> no_saturation/black/input.scss
a {b: grayscale(black)}
<===> legacy/no_saturation/black/input.scss
@use 'sass:color';
a {b: color.grayscale(black)}

<===> no_saturation/black/output.css
<===> legacy/no_saturation/black/output.css
a {
b: black;
}

<===>
================================================================================
<===> no_saturation/gray/input.scss
a {b: grayscale(#494949)}
<===> legacy/no_saturation/gray/input.scss
@use 'sass:color';
a {b: color.grayscale(#494949)}

<===> no_saturation/gray/output.css
<===> legacy/no_saturation/gray/output.css
a {
b: #494949;
}

<===>
================================================================================
<===> max_saturation/input.scss
a {b: grayscale(red)}
<===> legacy/max_saturation/input.scss
@use 'sass:color';
a {b: color.grayscale(red)}

<===> max_saturation/output.css
<===> legacy/max_saturation/output.css
a {
b: rgb(127.5, 127.5, 127.5);
}

<===>
================================================================================
<===> mid_saturation/input.scss
a {b: grayscale(#633736)}
<===> legacy/mid_saturation/input.scss
@use 'sass:color';
a {b: color.grayscale(#633736)}

<===> mid_saturation/output.css
<===> legacy/mid_saturation/output.css
a {
b: rgb(76.5, 76.5, 76.5);
}

<===>
================================================================================
<===> alpha/input.scss
a {b: grayscale(rgba(#633736, 0.3))}
<===> legacy/alpha/input.scss
@use 'sass:color';
a {b: color.grayscale(rgba(#633736, 0.3))}

<===> alpha/output.css
<===> legacy/alpha/output.css
a {
b: rgba(76.5, 76.5, 76.5, 0.3);
}

<===>
================================================================================
<===> number/input.scss
<===> global/number/input.scss
// A number should produce a plain function string, for CSS filter functions.
a {b: grayscale(15%)}

<===> number/output.css
<===> global/number/output.css
a {
b: grayscale(15%);
}

<===>
================================================================================
<===> named/input.scss
a {b: grayscale($color: white)}
<===> global/with_css_var/input.scss
a {b: grayscale(var(--c))}

<===> named/output.css
<===> global/with_css_var/output.css
a {
b: white;
b: grayscale(var(--c));
}

<===>
================================================================================
<===> non_legacy/rectangular/input.scss
a {b: grayscale(lab(50 -30 40))}
<===> global/with_calc/input.scss
a {b: grayscale(calc(1 + 2))}

<===> non_legacy/rectangular/output.css
<===> global/with_calc/output.css
a {
b: lab(48.58892555% 0.0000000648 -0.0000078984);
b: grayscale(3);
}

<===>
================================================================================
<===> non_legacy/polar/input.scss
a {b: grayscale(lch(54.3 107 40.9))}
<===> global/with_unquoted_calc/input.scss
a {b: grayscale(unquote('calc(1)'))}

<===> non_legacy/polar/output.css
<===> global/with_unquoted_calc/output.css
a {
b: lch(56.854581217% 0.0000089094 270.4699001175deg);
b: grayscale(calc(1));
}

<===>
================================================================================
<===> non_legacy/predefined/input.scss
a {b: grayscale(color(xyz-d65 0.41 0.21 0.02))}
<===> number/input.scss
@use 'sass:color';
a {b: color.grayscale(1)}

<===> non_legacy/predefined/output.css
<===> number/output.css
a {
b: color(xyz 0.232829773 0.2449664044 0.2667826176);
b: grayscale(1);
}

<===> number/warning
DEPRECATION WARNING: Passing a number (1) to color.grayscale() is deprecated.

Recommendation: grayscale(1)

,
2 | a {b: color.grayscale(1)}
| ^^^^^^^^^^^^^^^^^^
'
input.scss 2:7 root stylesheet

<===>
================================================================================
<===> with_css_var/input.scss
a {b: grayscale(var(--c))}
<===> named/input.scss
@use 'sass:color';
a {b: color.grayscale($color: white)}

<===> with_css_var/output.css
<===> named/output.css
a {
b: grayscale(var(--c));
b: white;
}

<===>
================================================================================
<===> with_calc/input.scss
a {b: grayscale(calc(1 + 2))}
<===> modern/rectangular/input.scss
@use 'sass:color';
a {b: color.grayscale(lab(50 -30 40))}

<===> with_calc/output.css
<===> modern/rectangular/output.css
a {
b: grayscale(3);
b: lab(48.58892555% 0.0000000648 -0.0000078984);
}

<===>
================================================================================
<===> with_unquoted_calc/input.scss
a {b: grayscale(unquote('calc(1)'))}
<===> modern/polar/input.scss
@use 'sass:color';
a {b: color.grayscale(lch(54.3 107 40.9))}

<===> with_unquoted_calc/output.css
<===> modern/polar/output.css
a {
b: grayscale(calc(1));
b: lch(56.854581217% 0.0000089094 270.4699001175deg);
}

<===>
================================================================================
<===> non_legacy/predefined/input.scss
@use 'sass:color';
a {b: color.grayscale(color(xyz-d65 0.41 0.21 0.02))}

<===> non_legacy/predefined/output.css
a {
b: color(xyz 0.232829773 0.2449664044 0.2667826176);
}

<===>
================================================================================
<===> error/too_few_args/input.scss
a {b: grayscale()}
@use 'sass:color';
a {b: color.grayscale()}

<===> error/too_few_args/error
Error: Missing argument $color.
,--> input.scss
1 | a {b: grayscale()}
| ^^^^^^^^^^^ invocation
2 | a {b: color.grayscale()}
| ^^^^^^^^^^^^^^^^^ invocation
'
,--> sass:color
1 | @function grayscale($color) {
| ================= declaration
'
input.scss 1:7 root stylesheet
input.scss 2:7 root stylesheet

<===>
================================================================================
<===> error/too_many_args/input.scss
a {b: grayscale(red, 1)}
@use 'sass:color';
a {b: color.grayscale(red, 1)}

<===> error/too_many_args/error
Error: Only 1 argument allowed, but 2 were passed.
,--> input.scss
1 | a {b: grayscale(red, 1)}
| ^^^^^^^^^^^^^^^^^ invocation
2 | a {b: color.grayscale(red, 1)}
| ^^^^^^^^^^^^^^^^^^^^^^^ invocation
'
,--> sass:color
1 | @function grayscale($color) {
| ================= declaration
'
input.scss 1:7 root stylesheet
input.scss 2:7 root stylesheet

<===>
================================================================================
<===> error/type/input.scss
a {b: grayscale(c)}
@use 'sass:color';
a {b: color.grayscale(c)}

<===> error/type/error
Error: $color: c is not a color.
,
1 | a {b: grayscale(c)}
| ^^^^^^^^^^^^
2 | a {b: color.grayscale(c)}
| ^^^^^^^^^^^^^^^^^^
'
input.scss 1:7 root stylesheet
input.scss 2:7 root stylesheet

<===>
================================================================================
Expand Down

0 comments on commit a92cec7

Please sign in to comment.