Skip to content

Commit

Permalink
Fix polar color space to string (#501)
Browse files Browse the repository at this point in the history
  • Loading branch information
zakybilfagih authored Aug 12, 2024
1 parent 7a99281 commit 6b74ab8
Show file tree
Hide file tree
Showing 3 changed files with 253 additions and 49 deletions.
91 changes: 46 additions & 45 deletions packages/ppx/test/css-support/color-module.t/input.re
Original file line number Diff line number Diff line change
Expand Up @@ -155,79 +155,80 @@
[%css {|column-rule-color: rebeccapurple;|}];

/* CSS Color Module Level 5 */
/* [%css {|color: color-mix(in srgb, teal 65%, olive);|}]; */
/* [%css {|color: color-mix(in srgb, rgb(255, 0, 0, .2) 65%, olive);|}]; */
/* [%css {|color: color-mix(in srgb, currentColor, rgba(0, 0, 0, .5) 65%;|}]; */
/* [%css {|color: color-mix(in srgb, currentColor 10%, rgba(0, 0, 0, .5) 65%;|}]; */
/* [%css {|color: color-mix(in lch, teal 65%, olive);|}]; */
/* [%css {|color: color-mix(in hsl, teal 65%, olive);|}]; */
/* [%css {|color: color-mix(in hwb, teal 65%, olive);|}]; */
/* [%css {|color: color-mix(in xyz, teal 65%, olive);|}]; */
/* [%css {|color: color-mix(in lab, teal 65%, olive);|}]; */
[%css {|color: color-mix(in srgb, teal 65%, olive);|}];
[%css {|color: color-mix(in srgb, rgb(255, 0, 0, .2) 65%, olive);|}];
[%css {|color: color-mix(in srgb, currentColor, rgba(0, 0, 0, .5) 65%);|}];
[%css {|color: color-mix(in srgb, currentColor 10%, rgba(0, 0, 0, .5) 65%);|}];
[%css {|color: color-mix(in lch, teal 65%, olive);|}];
[%css {|color: color-mix(in hsl, teal 65%, olive);|}];
[%css {|color: color-mix(in hwb, teal 65%, olive);|}];
[%css {|color: color-mix(in xyz, teal 65%, olive);|}];
[%css {|color: color-mix(in lab, teal 65%, olive);|}];
[%css {|color: color-mix(in lch longer hue, hsl(200deg 50% 80%), coral);|}];
/* [%css {|color: color-contrast(wheat vs tan, sienna, #b22222, #d2691e);|}]; */
/* [%css {|color: color-contrast(hsl(200 50% 80%) vs hsl(200 83% 23%), purple, hsl(300 100% 25%));|}]; */
/* [%css {|color: color-adjust(peru lightness -20%);|}]; */
/* [%css {|color: rgb(from indianred 255 g b);|}]; */
/* [%css {|color: hsl(from lightseagreen calc(h+180) s l);|}]; */
/* [%css {|color: lab(from orchid l 0 0);|}]; */
/* [%css {|color: lch(from peru calc(l * 0.8) c h);|}]; */
/* [%css {|background-color: color-mix(in srgb, teal 65%, olive);|}]; */
/* [%css {|background-color: color-mix(in srgb, rgb(255, 0, 0, .2) 65%, olive);|}]; */
/* [%css {|background-color: color-mix(in srgb, currentColor, rgba(0, 0, 0, .5) 65%;|}]; */
/* [%css {|background-color: color-mix(in srgb, currentColor 10%, rgba(0, 0, 0, .5) 65%;|}]; */
/* [%css {|background-color: color-mix(in lch, teal 65%, olive);|}]; */
/* [%css {|background-color: color-mix(in hsl, teal 65%, olive);|}]; */
/* [%css {|background-color: color-mix(in hwb, teal 65%, olive);|}]; */
/* [%css {|background-color: color-mix(in xyz, teal 65%, olive);|}]; */
/* [%css {|background-color: color-mix(in lab, teal 65%, olive);|}]; */
[%css {|background-color: color-mix(in srgb, teal 65%, olive);|}];
[%css {|background-color: color-mix(in srgb, rgb(255, 0, 0, .2) 65%, olive);|}];
[%css {|background-color: color-mix(in srgb, currentColor, rgba(0, 0, 0, .5) 65%);|}];
[%css {|background-color: color-mix(in srgb, currentColor 10%, rgba(0, 0, 0, .5) 65%);|}];
[%css {|background-color: color-mix(in lch, teal 65%, olive);|}];
[%css {|background-color: color-mix(in hsl, teal 65%, olive);|}];
[%css {|background-color: color-mix(in hwb, teal 65%, olive);|}];
[%css {|background-color: color-mix(in xyz, teal 65%, olive);|}];
[%css {|background-color: color-mix(in lab, teal 65%, olive);|}];
/* [%css {|background-color: color-contrast(wheat vs tan, sienna, #b22222, #d2691e);|}]; */
/* [%css {|background-color: color-contrast(hsl(200 50% 80%) vs hsl(200 83% 23%), purple, hsl(300 100% 25%));|}]; */
/* [%css {|background-color: color-adjust(peru lightness -20%);|}]; */
/* [%css {|background-color: rgb(from indianred 255 g b);|}]; */
/* [%css {|background-color: hsl(from lightseagreen calc(h+180) s l);|}]; */
/* [%css {|background-color: lab(from orchid l 0 0);|}]; */
/* [%css {|background-color: lch(from peru calc(l * 0.8) c h);|}]; */
/* [%css {|border-color: color-mix(in srgb, teal 65%, olive);|}]; */
/* [%css {|border-color: color-mix(in srgb, rgb(255, 0, 0, .2) 65%, olive);|}]; */
/* [%css {|border-color: color-mix(in srgb, currentColor, rgba(0, 0, 0, .5) 65%;|}]; */
/* [%css {|border-color: color-mix(in srgb, currentColor 10%, rgba(0, 0, 0, .5) 65%;|}]; */
/* [%css {|border-color: color-mix(in lch, teal 65%, olive);|}]; */
/* [%css {|border-color: color-mix(in hsl, teal 65%, olive);|}]; */
/* [%css {|border-color: color-mix(in hwb, teal 65%, olive);|}]; */
/* [%css {|border-color: color-mix(in xyz, teal 65%, olive);|}]; */
/* [%css {|border-color: color-mix(in lab, teal 65%, olive);|}]; */
[%css {|border-color: color-mix(in srgb, teal 65%, olive);|}];
[%css {|border-color: color-mix(in srgb, rgb(255, 0, 0, .2) 65%, olive);|}];
[%css {|border-color: color-mix(in srgb, currentColor, rgba(0, 0, 0, .5) 65%);|}];
[%css {|border-color: color-mix(in srgb, currentColor 10%, rgba(0, 0, 0, .5) 65%);|}];
[%css {|border-color: color-mix(in lch, teal 65%, olive);|}];
[%css {|border-color: color-mix(in hsl, teal 65%, olive);|}];
[%css {|border-color: color-mix(in hwb, teal 65%, olive);|}];
[%css {|border-color: color-mix(in xyz, teal 65%, olive);|}];
[%css {|border-color: color-mix(in lab, teal 65%, olive);|}];
/* [%css {|border-color: color-contrast(wheat vs tan, sienna, #b22222, #d2691e);|}]; */
/* [%css {|border-color: color-contrast(hsl(200 50% 80%) vs hsl(200 83% 23%), purple, hsl(300 100% 25%));|}]; */
/* [%css {|border-color: color-adjust(peru lightness -20%);|}]; */
/* [%css {|border-color: rgb(from indianred 255 g b);|}]; */
/* [%css {|border-color: hsl(from lightseagreen calc(h+180) s l);|}]; */
/* [%css {|border-color: lab(from orchid l 0 0);|}]; */
/* [%css {|border-color: lch(from peru calc(l * 0.8) c h);|}]; */
/* [%css {|text-decoration-color: color-mix(in srgb, teal 65%, olive);|}]; */
/* [%css {|text-decoration-color: color-mix(in srgb, rgb(255, 0, 0, .2) 65%, olive);|}]; */
/* [%css {|text-decoration-color: color-mix(in srgb, currentColor, rgba(0, 0, 0, .5) 65%;|}]; */
/* [%css {|text-decoration-color: color-mix(in srgb, currentColor 10%, rgba(0, 0, 0, .5) 65%;|}]; */
/* [%css {|text-decoration-color: color-mix(in lch, teal 65%, olive);|}]; */
/* [%css {|text-decoration-color: color-mix(in hsl, teal 65%, olive);|}]; */
/* [%css {|text-decoration-color: color-mix(in hwb, teal 65%, olive);|}]; */
/* [%css {|text-decoration-color: color-mix(in xyz, teal 65%, olive);|}]; */
/* [%css {|text-decoration-color: color-mix(in lab, teal 65%, olive);|}]; */
[%css {|text-decoration-color: color-mix(in srgb, teal 65%, olive);|}];
[%css {|text-decoration-color: color-mix(in srgb, rgb(255, 0, 0, .2) 65%, olive);|}];
[%css {|text-decoration-color: color-mix(in srgb, currentColor, rgba(0, 0, 0, .5) 65%);|}];
[%css {|text-decoration-color: color-mix(in srgb, currentColor 10%, rgba(0, 0, 0, .5) 65%);|}];
[%css {|text-decoration-color: color-mix(in lch, teal 65%, olive);|}];
[%css {|text-decoration-color: color-mix(in hsl, teal 65%, olive);|}];
[%css {|text-decoration-color: color-mix(in hwb, teal 65%, olive);|}];
[%css {|text-decoration-color: color-mix(in xyz, teal 65%, olive);|}];
[%css {|text-decoration-color: color-mix(in lab, teal 65%, olive);|}];
/* [%css {|text-decoration-color: color-contrast(wheat vs tan, sienna, #b22222, #d2691e);|}]; */
/* [%css {|text-decoration-color: color-contrast(hsl(200 50% 80%) vs hsl(200 83% 23%), purple, hsl(300 100% 25%));|}]; */
/* [%css {|text-decoration-color: color-adjust(peru lightness -20%);|}]; */
/* [%css {|text-decoration-color: rgb(from indianred 255 g b);|}]; */
/* [%css {|text-decoration-color: hsl(from lightseagreen calc(h+180) s l);|}]; */
/* [%css {|text-decoration-color: lab(from orchid l 0 0);|}]; */
/* [%css {|text-decoration-color: lch(from peru calc(l * 0.8) c h);|}]; */
/* [%css {|column-rule-color: color-mix(in srgb, teal 65%, olive);|}]; */
/* [%css {|column-rule-color: color-mix(in srgb, rgb(255, 0, 0, .2) 65%, olive);|}]; */
/* [%css {|column-rule-color: color-mix(in srgb, currentColor, rgba(0, 0, 0, .5) 65%;|}]; */
/* [%css {|column-rule-color: color-mix(in srgb, currentColor 10%, rgba(0, 0, 0, .5) 65%;|}]; */
/* [%css {|column-rule-color: color-mix(in lch, teal 65%, olive);|}]; */
/* [%css {|column-rule-color: color-mix(in hsl, teal 65%, olive);|}]; */
/* [%css {|column-rule-color: color-mix(in hwb, teal 65%, olive);|}]; */
/* [%css {|column-rule-color: color-mix(in xyz, teal 65%, olive);|}]; */
/* [%css {|column-rule-color: color-mix(in lab, teal 65%, olive);|}]; */
[%css {|column-rule-color: color-mix(in srgb, teal 65%, olive);|}];
[%css {|column-rule-color: color-mix(in srgb, rgb(255, 0, 0, .2) 65%, olive);|}];
[%css {|column-rule-color: color-mix(in srgb, currentColor, rgba(0, 0, 0, .5) 65%);|}];
[%css {|column-rule-color: color-mix(in srgb, currentColor 10%, rgba(0, 0, 0, .5) 65%);|}];
[%css {|column-rule-color: color-mix(in lch, teal 65%, olive);|}];
[%css {|column-rule-color: color-mix(in hsl, teal 65%, olive);|}];
[%css {|column-rule-color: color-mix(in hwb, teal 65%, olive);|}];
[%css {|column-rule-color: color-mix(in xyz, teal 65%, olive);|}];
[%css {|column-rule-color: color-mix(in lab, teal 65%, olive);|}];
/* [%css {|column-rule-color: color-contrast(wheat vs tan, sienna, #b22222, #d2691e);|}]; */
/* [%css {|column-rule-color: color-contrast(hsl(200 50% 80%) vs hsl(200 83% 23%), purple, hsl(300 100% 25%));|}]; */
/* [%css {|column-rule-color: color-adjust(peru lightness -20%);|}]; */
Expand Down
204 changes: 204 additions & 0 deletions packages/ppx/test/css-support/color-module.t/run.t
Original file line number Diff line number Diff line change
Expand Up @@ -146,5 +146,209 @@ If this test fail means that the module is not in sync with the ppx
CSS.unsafe({js|columnRuleColor|js}, {js|#000000FF|js});
CSS.unsafe({js|columnRuleColor|js}, {js|rebeccapurple|js});

CSS.color(
`colorMix((`srgb, (CSS.teal, Some(`percent(65.))), (CSS.olive, None))),
);
CSS.color(
`colorMix((
`srgb,
(`rgba((255, 0, 0, `num(0.2))), Some(`percent(65.))),
(CSS.olive, None),
)),
);
CSS.color(
`colorMix((
`srgb,
(`currentColor, None),
(`rgba((0, 0, 0, `num(0.5))), Some(`percent(65.))),
)),
);
CSS.color(
`colorMix((
`srgb,
(`currentColor, Some(`percent(10.))),
(`rgba((0, 0, 0, `num(0.5))), Some(`percent(65.))),
)),
);
CSS.color(
`colorMix((`lch, (CSS.teal, Some(`percent(65.))), (CSS.olive, None))),
);
CSS.color(
`colorMix((`hsl, (CSS.teal, Some(`percent(65.))), (CSS.olive, None))),
);
CSS.color(
`colorMix((`hwb, (CSS.teal, Some(`percent(65.))), (CSS.olive, None))),
);
CSS.color(
`colorMix((`xyz, (CSS.teal, Some(`percent(65.))), (CSS.olive, None))),
);
CSS.color(
`colorMix((`lab, (CSS.teal, Some(`percent(65.))), (CSS.olive, None))),
);
CSS.color(
`colorMix((
`polar_with_hue((`lch, `longer)),
(`hsl((`deg(200.), `percent(50.), `percent(80.))), None),
(CSS.coral, None),
)),
);

CSS.backgroundColor(
`colorMix((`srgb, (CSS.teal, Some(`percent(65.))), (CSS.olive, None))),
);
CSS.backgroundColor(
`colorMix((
`srgb,
(`rgba((255, 0, 0, `num(0.2))), Some(`percent(65.))),
(CSS.olive, None),
)),
);
CSS.backgroundColor(
`colorMix((
`srgb,
(`currentColor, None),
(`rgba((0, 0, 0, `num(0.5))), Some(`percent(65.))),
)),
);
CSS.backgroundColor(
`colorMix((
`srgb,
(`currentColor, Some(`percent(10.))),
(`rgba((0, 0, 0, `num(0.5))), Some(`percent(65.))),
)),
);
CSS.backgroundColor(
`colorMix((`lch, (CSS.teal, Some(`percent(65.))), (CSS.olive, None))),
);
CSS.backgroundColor(
`colorMix((`hsl, (CSS.teal, Some(`percent(65.))), (CSS.olive, None))),
);
CSS.backgroundColor(
`colorMix((`hwb, (CSS.teal, Some(`percent(65.))), (CSS.olive, None))),
);
CSS.backgroundColor(
`colorMix((`xyz, (CSS.teal, Some(`percent(65.))), (CSS.olive, None))),
);
CSS.backgroundColor(
`colorMix((`lab, (CSS.teal, Some(`percent(65.))), (CSS.olive, None))),
);

CSS.borderColor(
`colorMix((`srgb, (CSS.teal, Some(`percent(65.))), (CSS.olive, None))),
);
CSS.borderColor(
`colorMix((
`srgb,
(`rgba((255, 0, 0, `num(0.2))), Some(`percent(65.))),
(CSS.olive, None),
)),
);
CSS.borderColor(
`colorMix((
`srgb,
(`currentColor, None),
(`rgba((0, 0, 0, `num(0.5))), Some(`percent(65.))),
)),
);
CSS.borderColor(
`colorMix((
`srgb,
(`currentColor, Some(`percent(10.))),
(`rgba((0, 0, 0, `num(0.5))), Some(`percent(65.))),
)),
);
CSS.borderColor(
`colorMix((`lch, (CSS.teal, Some(`percent(65.))), (CSS.olive, None))),
);
CSS.borderColor(
`colorMix((`hsl, (CSS.teal, Some(`percent(65.))), (CSS.olive, None))),
);
CSS.borderColor(
`colorMix((`hwb, (CSS.teal, Some(`percent(65.))), (CSS.olive, None))),
);
CSS.borderColor(
`colorMix((`xyz, (CSS.teal, Some(`percent(65.))), (CSS.olive, None))),
);
CSS.borderColor(
`colorMix((`lab, (CSS.teal, Some(`percent(65.))), (CSS.olive, None))),
);

CSS.textDecorationColor(
`colorMix((`srgb, (CSS.teal, Some(`percent(65.))), (CSS.olive, None))),
);
CSS.textDecorationColor(
`colorMix((
`srgb,
(`rgba((255, 0, 0, `num(0.2))), Some(`percent(65.))),
(CSS.olive, None),
)),
);
CSS.textDecorationColor(
`colorMix((
`srgb,
(`currentColor, None),
(`rgba((0, 0, 0, `num(0.5))), Some(`percent(65.))),
)),
);
CSS.textDecorationColor(
`colorMix((
`srgb,
(`currentColor, Some(`percent(10.))),
(`rgba((0, 0, 0, `num(0.5))), Some(`percent(65.))),
)),
);
CSS.textDecorationColor(
`colorMix((`lch, (CSS.teal, Some(`percent(65.))), (CSS.olive, None))),
);
CSS.textDecorationColor(
`colorMix((`hsl, (CSS.teal, Some(`percent(65.))), (CSS.olive, None))),
);
CSS.textDecorationColor(
`colorMix((`hwb, (CSS.teal, Some(`percent(65.))), (CSS.olive, None))),
);
CSS.textDecorationColor(
`colorMix((`xyz, (CSS.teal, Some(`percent(65.))), (CSS.olive, None))),
);
CSS.textDecorationColor(
`colorMix((`lab, (CSS.teal, Some(`percent(65.))), (CSS.olive, None))),
);

CSS.unsafe(
{js|columnRuleColor|js},
{js|color-mix(in srgb, teal 65%, olive)|js},
);
CSS.unsafe(
{js|columnRuleColor|js},
{js|color-mix(in srgb, rgb(255, 0, 0, .2) 65%, olive)|js},
);
CSS.unsafe(
{js|columnRuleColor|js},
{js|color-mix(in srgb, currentColor, rgba(0, 0, 0, .5) 65%)|js},
);
CSS.unsafe(
{js|columnRuleColor|js},
{js|color-mix(in srgb, currentColor 10%, rgba(0, 0, 0, .5) 65%)|js},
);
CSS.unsafe(
{js|columnRuleColor|js},
{js|color-mix(in lch, teal 65%, olive)|js},
);
CSS.unsafe(
{js|columnRuleColor|js},
{js|color-mix(in hsl, teal 65%, olive)|js},
);
CSS.unsafe(
{js|columnRuleColor|js},
{js|color-mix(in hwb, teal 65%, olive)|js},
);
CSS.unsafe(
{js|columnRuleColor|js},
{js|color-mix(in xyz, teal 65%, olive)|js},
);
CSS.unsafe(
{js|columnRuleColor|js},
{js|color-mix(in lab, teal 65%, olive)|js},
);

CSS.color(`rgba((0, 0, 0, `num(1.))));
CSS.color(`rgba((0, 0, 0, `calc(`sub((`num(10.), `num(1.)))))));
7 changes: 3 additions & 4 deletions packages/runtime/native/shared/Css_types.ml
Original file line number Diff line number Diff line change
Expand Up @@ -1501,11 +1501,10 @@ module Color = struct
| #rectangular_color_space as rcs -> rectangular_color_space_to_string rcs
| #polar_color_space as pcs -> polar_color_space_to_string pcs
| `polar_with_hue (pcs, hs) ->
{js|polar-with-hue(|js}
^ polar_color_space_to_string pcs
^ {js|, |js}
polar_color_space_to_string pcs
^ {js| |js}
^ hue_size_to_string hs
^ {js|)|js}
^ {js| hue|js}

let rec toString (x : t) =
match x with
Expand Down

0 comments on commit 6b74ab8

Please sign in to comment.