From 6d5a40efe0e2784e38e590aa53efeabaef0c4d24 Mon Sep 17 00:00:00 2001 From: ouz-a Date: Tue, 24 Oct 2023 13:03:31 +0300 Subject: [PATCH 01/11] support percentage --- pax-std/src/types/mod.rs | 49 +++++++++++++++++++++++++-------------- pax-std/src/types/text.rs | 10 ++++---- 2 files changed, 36 insertions(+), 23 deletions(-) diff --git a/pax-std/src/types/mod.rs b/pax-std/src/types/mod.rs index e2e666c33..426f74b2a 100644 --- a/pax-std/src/types/mod.rs +++ b/pax-std/src/types/mod.rs @@ -146,42 +146,55 @@ impl Fill { pub struct Color { pub color_variant: ColorVariant, } + +pub fn percent_to_float(percent: Size) -> f64 { + match percent { + Size::Pixels(_) => { + panic!("Color percentages must be specified in percentages"); + } + Size::Percent(p) => p.get_as_float() / 100.0, + Size::Combined(_, _) => { + panic!("Color percentages must be specified in percentages"); + } + } +} + impl Color { - pub fn hlca(h: Numeric, l: Numeric, c: Numeric, a: Numeric) -> Self { + pub fn hlca(h: Size, l: Size, c: Size, a: Size) -> Self { Self { color_variant: ColorVariant::Hlca([ - h.get_as_float(), - l.get_as_float(), - c.get_as_float(), - a.get_as_float(), + percent_to_float(h), + percent_to_float(l), + percent_to_float(c), + percent_to_float(a), ]), } } - pub fn hlc(h: Numeric, l: Numeric, c: Numeric) -> Self { + pub fn hlc(h: Size, l: Size, c: Size) -> Self { Self { color_variant: ColorVariant::Hlc([ - h.get_as_float(), - l.get_as_float(), - c.get_as_float(), + percent_to_float(h), + percent_to_float(l), + percent_to_float(c), ]), } } - pub fn rgba(r: Numeric, g: Numeric, b: Numeric, a: Numeric) -> Self { + pub fn rgba(r: Size, g: Size, b: Size, a: Size) -> Self { Self { color_variant: ColorVariant::Rgba([ - r.get_as_float(), - g.get_as_float(), - b.get_as_float(), - a.get_as_float(), + percent_to_float(r), + percent_to_float(g), + percent_to_float(b), + percent_to_float(a), ]), } } - pub fn rgb(r: Numeric, g: Numeric, b: Numeric) -> Self { + pub fn rgb(r: Size, g: Size, b: Size) -> Self { Self { color_variant: ColorVariant::Rgb([ - r.get_as_float(), - g.get_as_float(), - b.get_as_float(), + percent_to_float(r), + percent_to_float(g), + percent_to_float(b), ]), } } diff --git a/pax-std/src/types/text.rs b/pax-std/src/types/text.rs index 03cf82ac9..5e26b4e6f 100644 --- a/pax-std/src/types/text.rs +++ b/pax-std/src/types/text.rs @@ -1,5 +1,5 @@ use crate::types::Color; -use api::StringBox; +use api::{StringBox, Size}; use pax_lang::api::{Numeric, Property, PropertyLiteral, SizePixels}; use pax_lang::*; use pax_message::{ @@ -26,10 +26,10 @@ impl Default for TextStyle { font: Box::new(PropertyLiteral::new(Font::default())), font_size: Box::new(PropertyLiteral::new(SizePixels(Numeric::Float(20.0)))), fill: Box::new(PropertyLiteral::new(Color::rgba( - Numeric::Float(0.0), - Numeric::Float(0.0), - Numeric::Float(0.0), - Numeric::Float(1.0), + Size::Percent(Numeric::Float(0.0)), + Size::Percent(Numeric::Float(0.0)), + Size::Percent(Numeric::Float(0.0)), + Size::Percent(Numeric::Float(1.0)), ))), underline: Box::new(PropertyLiteral::new(false)), align_multiline: Box::new(PropertyLiteral::new(TextAlignHorizontal::Left)), From 82603718c5a0a7dda881cd716b4557e42b89b1eb Mon Sep 17 00:00:00 2001 From: ouz-a Date: Tue, 24 Oct 2023 15:51:26 +0300 Subject: [PATCH 02/11] tailwind colors and shade --- pax-std/src/types/mod.rs | 123 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 123 insertions(+) diff --git a/pax-std/src/types/mod.rs b/pax-std/src/types/mod.rs index 426f74b2a..d40048b32 100644 --- a/pax-std/src/types/mod.rs +++ b/pax-std/src/types/mod.rs @@ -198,6 +198,129 @@ impl Color { ]), } } + + pub fn shade(color: Color, shade: Numeric) -> Self { + let shade = shade.get_as_float().clamp(0.0, 1000.0) / 1000.0; + let (r, g, b, a) = color.to_piet_color().as_rgba(); + let r = ((r * 255.0) * shade) / 255.0; + let g = ((g * 255.0) * shade) / 255.0; + let b = ((b * 255.0) * shade) / 255.0; + pax_runtime_api::log(format!("{r} {g} {b} {a}").as_str()); + Self { + color_variant: ColorVariant::Rgba([r, g, b, a]), + } + } + + pub fn slate() -> Self { + Self { + color_variant: ColorVariant::Rgb([100.0 / 255.0, 116.0 / 255.0, 139.0 / 255.0]), + } + } + pub fn gray() -> Self { + Self { + color_variant: ColorVariant::Rgb([107.0 / 255.0, 114.0 / 255.0, 128.0 / 255.0]), + } + } + pub fn zinc() -> Self { + Self { + color_variant: ColorVariant::Rgb([113.0 / 255.0, 113.0 / 255.0, 122.0 / 255.0]), + } + } + pub fn neutral() -> Self { + Self { + color_variant: ColorVariant::Rgb([115.0 / 255.0, 115.0 / 255.0, 115.0 / 255.0]), + } + } + pub fn stone() -> Self { + Self { + color_variant: ColorVariant::Rgb([120.0 / 255.0, 113.0 / 255.0, 108.0 / 255.0]), + } + } + pub fn red() -> Self { + Self { + color_variant: ColorVariant::Rgb([234.0 / 255.0, 68.0 / 255.0, 68.0 / 255.0]), + } + } + pub fn orange() -> Self { + Self { + color_variant: ColorVariant::Rgb([249.0 / 255.0, 115.0 / 255.0, 22.0 / 255.0]), + } + } + pub fn amber() -> Self { + Self { + color_variant: ColorVariant::Rgb([245.0 / 255.0, 158.0 / 255.0, 11.0 / 255.0]), + } + } + pub fn yellow() -> Self { + Self { + color_variant: ColorVariant::Rgb([234.0 / 255.0, 179.0 / 255.0, 8.0 / 255.0]), + } + } + pub fn lime() -> Self { + Self { + color_variant: ColorVariant::Rgb([132.0 / 255.0, 204.0 / 255.0, 22.0 / 255.0]), + } + } + pub fn green() -> Self { + Self { + color_variant: ColorVariant::Rgb([34.0 / 255.0, 197.0 / 255.0, 94.0 / 255.0]), + } + } + pub fn emerald() -> Self { + Self { + color_variant: ColorVariant::Rgb([16.0 / 255.0, 185.0 / 255.0, 129.0 / 255.0]), + } + } + pub fn teal() -> Self { + Self { + color_variant: ColorVariant::Rgb([20.0 / 255.0, 184.0 / 255.0, 166.0 / 255.0]), + } + } + pub fn cyan() -> Self { + Self { + color_variant: ColorVariant::Rgb([6.0 / 255.0, 182.0 / 255.0, 212.0 / 255.0]), + } + } + pub fn sky() -> Self { + Self { + color_variant: ColorVariant::Rgb([14.0 / 255.0, 165.0 / 255.0, 233.0 / 255.0]), + } + } + pub fn blue() -> Self { + Self { + color_variant: ColorVariant::Rgb([59.0 / 255.0, 130.0 / 255.0, 246.0 / 255.0]), + } + } + pub fn indigo() -> Self { + Self { + color_variant: ColorVariant::Rgb([99.0 / 255.0, 102.0 / 255.0, 241.0 / 255.0]), + } + } + pub fn violet() -> Self { + Self { + color_variant: ColorVariant::Rgb([132.0 / 255.0, 96.0 / 255.0, 246.0 / 255.0]), + } + } + pub fn purple() -> Self { + Self { + color_variant: ColorVariant::Rgb([168.0 / 255.0, 85.0 / 255.0, 247.0 / 255.0]), + } + } + pub fn fuchsia() -> Self { + Self { + color_variant: ColorVariant::Rgb([217.0 / 255.0, 70.0 / 255.0, 239.0 / 255.0]), + } + } + pub fn pink() -> Self { + Self { + color_variant: ColorVariant::Rgb([236.0 / 255.0, 72.0 / 255.0, 153.0 / 255.0]), + } + } + pub fn rose() -> Self { + Self { + color_variant: ColorVariant::Rgb([244.0 / 255.0, 63.0 / 255.0, 94.0 / 255.0]), + } + } pub fn to_piet_color(&self) -> piet::Color { match self.color_variant { ColorVariant::Hlca(slice) => piet::Color::hlca(slice[0], slice[1], slice[2], slice[3]), From b15db13f69200e2f9f9c7ad438aebf5654dc7c0b Mon Sep 17 00:00:00 2001 From: ouz-a Date: Tue, 24 Oct 2023 15:54:37 +0300 Subject: [PATCH 03/11] don't use magic number --- pax-std/src/types/mod.rs | 52 +++++++++++++++++++++------------------- 1 file changed, 27 insertions(+), 25 deletions(-) diff --git a/pax-std/src/types/mod.rs b/pax-std/src/types/mod.rs index d40048b32..a747c9c79 100644 --- a/pax-std/src/types/mod.rs +++ b/pax-std/src/types/mod.rs @@ -9,6 +9,8 @@ use pax_lang::*; use pax_message::ColorVariantMessage; use piet::UnitPoint; +const RGB: f64 = 255.0; + #[derive(Pax)] #[custom(Default)] pub struct Stroke { @@ -202,9 +204,9 @@ impl Color { pub fn shade(color: Color, shade: Numeric) -> Self { let shade = shade.get_as_float().clamp(0.0, 1000.0) / 1000.0; let (r, g, b, a) = color.to_piet_color().as_rgba(); - let r = ((r * 255.0) * shade) / 255.0; - let g = ((g * 255.0) * shade) / 255.0; - let b = ((b * 255.0) * shade) / 255.0; + let r = ((r * RGB) * shade) / RGB; + let g = ((g * RGB) * shade) / RGB; + let b = ((b * RGB) * shade) / RGB; pax_runtime_api::log(format!("{r} {g} {b} {a}").as_str()); Self { color_variant: ColorVariant::Rgba([r, g, b, a]), @@ -213,112 +215,112 @@ impl Color { pub fn slate() -> Self { Self { - color_variant: ColorVariant::Rgb([100.0 / 255.0, 116.0 / 255.0, 139.0 / 255.0]), + color_variant: ColorVariant::Rgb([100.0 / RGB, 116.0 / RGB, 139.0 / RGB]), } } pub fn gray() -> Self { Self { - color_variant: ColorVariant::Rgb([107.0 / 255.0, 114.0 / 255.0, 128.0 / 255.0]), + color_variant: ColorVariant::Rgb([107.0 / RGB, 114.0 / RGB, 128.0 / RGB]), } } pub fn zinc() -> Self { Self { - color_variant: ColorVariant::Rgb([113.0 / 255.0, 113.0 / 255.0, 122.0 / 255.0]), + color_variant: ColorVariant::Rgb([113.0 / RGB, 113.0 / RGB, 122.0 / RGB]), } } pub fn neutral() -> Self { Self { - color_variant: ColorVariant::Rgb([115.0 / 255.0, 115.0 / 255.0, 115.0 / 255.0]), + color_variant: ColorVariant::Rgb([115.0 / RGB, 115.0 / RGB, 115.0 / RGB]), } } pub fn stone() -> Self { Self { - color_variant: ColorVariant::Rgb([120.0 / 255.0, 113.0 / 255.0, 108.0 / 255.0]), + color_variant: ColorVariant::Rgb([120.0 / RGB, 113.0 / RGB, 108.0 / RGB]), } } pub fn red() -> Self { Self { - color_variant: ColorVariant::Rgb([234.0 / 255.0, 68.0 / 255.0, 68.0 / 255.0]), + color_variant: ColorVariant::Rgb([234.0 / RGB, 68.0 / RGB, 68.0 / RGB]), } } pub fn orange() -> Self { Self { - color_variant: ColorVariant::Rgb([249.0 / 255.0, 115.0 / 255.0, 22.0 / 255.0]), + color_variant: ColorVariant::Rgb([249.0 / RGB, 115.0 / RGB, 22.0 / RGB]), } } pub fn amber() -> Self { Self { - color_variant: ColorVariant::Rgb([245.0 / 255.0, 158.0 / 255.0, 11.0 / 255.0]), + color_variant: ColorVariant::Rgb([245.0 / RGB, 158.0 / RGB, 11.0 / RGB]), } } pub fn yellow() -> Self { Self { - color_variant: ColorVariant::Rgb([234.0 / 255.0, 179.0 / 255.0, 8.0 / 255.0]), + color_variant: ColorVariant::Rgb([234.0 / RGB, 179.0 / RGB, 8.0 / RGB]), } } pub fn lime() -> Self { Self { - color_variant: ColorVariant::Rgb([132.0 / 255.0, 204.0 / 255.0, 22.0 / 255.0]), + color_variant: ColorVariant::Rgb([132.0 / RGB, 204.0 / RGB, 22.0 / RGB]), } } pub fn green() -> Self { Self { - color_variant: ColorVariant::Rgb([34.0 / 255.0, 197.0 / 255.0, 94.0 / 255.0]), + color_variant: ColorVariant::Rgb([34.0 / RGB, 197.0 / RGB, 94.0 / RGB]), } } pub fn emerald() -> Self { Self { - color_variant: ColorVariant::Rgb([16.0 / 255.0, 185.0 / 255.0, 129.0 / 255.0]), + color_variant: ColorVariant::Rgb([16.0 / RGB, 185.0 / RGB, 129.0 / RGB]), } } pub fn teal() -> Self { Self { - color_variant: ColorVariant::Rgb([20.0 / 255.0, 184.0 / 255.0, 166.0 / 255.0]), + color_variant: ColorVariant::Rgb([20.0 / RGB, 184.0 / RGB, 166.0 / RGB]), } } pub fn cyan() -> Self { Self { - color_variant: ColorVariant::Rgb([6.0 / 255.0, 182.0 / 255.0, 212.0 / 255.0]), + color_variant: ColorVariant::Rgb([6.0 / RGB, 182.0 / RGB, 212.0 / RGB]), } } pub fn sky() -> Self { Self { - color_variant: ColorVariant::Rgb([14.0 / 255.0, 165.0 / 255.0, 233.0 / 255.0]), + color_variant: ColorVariant::Rgb([14.0 / RGB, 165.0 / RGB, 233.0 / RGB]), } } pub fn blue() -> Self { Self { - color_variant: ColorVariant::Rgb([59.0 / 255.0, 130.0 / 255.0, 246.0 / 255.0]), + color_variant: ColorVariant::Rgb([59.0 / RGB, 130.0 / RGB, 246.0 / RGB]), } } pub fn indigo() -> Self { Self { - color_variant: ColorVariant::Rgb([99.0 / 255.0, 102.0 / 255.0, 241.0 / 255.0]), + color_variant: ColorVariant::Rgb([99.0 / RGB, 102.0 / RGB, 241.0 / RGB]), } } pub fn violet() -> Self { Self { - color_variant: ColorVariant::Rgb([132.0 / 255.0, 96.0 / 255.0, 246.0 / 255.0]), + color_variant: ColorVariant::Rgb([132.0 / RGB, 96.0 / RGB, 246.0 / RGB]), } } pub fn purple() -> Self { Self { - color_variant: ColorVariant::Rgb([168.0 / 255.0, 85.0 / 255.0, 247.0 / 255.0]), + color_variant: ColorVariant::Rgb([168.0 / RGB, 85.0 / RGB, 247.0 / RGB]), } } pub fn fuchsia() -> Self { Self { - color_variant: ColorVariant::Rgb([217.0 / 255.0, 70.0 / 255.0, 239.0 / 255.0]), + color_variant: ColorVariant::Rgb([217.0 / RGB, 70.0 / RGB, 239.0 / RGB]), } } pub fn pink() -> Self { Self { - color_variant: ColorVariant::Rgb([236.0 / 255.0, 72.0 / 255.0, 153.0 / 255.0]), + color_variant: ColorVariant::Rgb([236.0 / RGB, 72.0 / RGB, 153.0 / RGB]), } } pub fn rose() -> Self { Self { - color_variant: ColorVariant::Rgb([244.0 / 255.0, 63.0 / 255.0, 94.0 / 255.0]), + color_variant: ColorVariant::Rgb([244.0 / RGB, 63.0 / RGB, 94.0 / RGB]), } } pub fn to_piet_color(&self) -> piet::Color { From fbe9aa660576c92768199012025ba8fa87184588 Mon Sep 17 00:00:00 2001 From: ouz-a Date: Tue, 24 Oct 2023 16:33:10 +0300 Subject: [PATCH 04/11] add documentation to shade and improve it --- pax-std/src/types/mod.rs | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/pax-std/src/types/mod.rs b/pax-std/src/types/mod.rs index a747c9c79..5d75605e8 100644 --- a/pax-std/src/types/mod.rs +++ b/pax-std/src/types/mod.rs @@ -201,13 +201,19 @@ impl Color { } } + + /// Shades a given color by a specified value. + /// + /// * `color` - A `Color` struct representing the color to be shaded. + /// * `shade` - A `Numeric` struct representing the value by which to shade the color of. + /// Accepted values are between 0 and 400, higher values result in a darker color. + /// Most neutral color will be achieved at 275. pub fn shade(color: Color, shade: Numeric) -> Self { - let shade = shade.get_as_float().clamp(0.0, 1000.0) / 1000.0; + let shade = 4.0 - (shade.get_as_float().clamp(0.0, 400.0) / 100.0); let (r, g, b, a) = color.to_piet_color().as_rgba(); let r = ((r * RGB) * shade) / RGB; let g = ((g * RGB) * shade) / RGB; let b = ((b * RGB) * shade) / RGB; - pax_runtime_api::log(format!("{r} {g} {b} {a}").as_str()); Self { color_variant: ColorVariant::Rgba([r, g, b, a]), } From 6fcb52061dd2a2a377e512dc000bd1857a2b9f7f Mon Sep 17 00:00:00 2001 From: ouz-a Date: Tue, 24 Oct 2023 17:14:03 +0300 Subject: [PATCH 05/11] website running with new color --- pax-example/src/website_desktop.pax | 28 ++++++++++++++-------------- pax-example/src/website_mobile.pax | 28 ++++++++++++++-------------- 2 files changed, 28 insertions(+), 28 deletions(-) diff --git a/pax-example/src/website_desktop.pax b/pax-example/src/website_desktop.pax index 15f4eeb50..35501d708 100644 --- a/pax-example/src/website_desktop.pax +++ b/pax-example/src/website_desktop.pax @@ -12,7 +12,7 @@ fill={Fill::linearGradient( (0%, 50%), (100%, 50%), - [GradientStop::get(Color::rgba(0.0,0.0,0.0,1.0), 0%), GradientStop::get(Color::rgba(0.0,0.0,0.0,0.5), 100%)])} + [GradientStop::get(Color::rgba(0.0%,0.0%,0.0%,100.0%), 0%), GradientStop::get(Color::rgba(0.0%,0.0%,0.0%,50.0%), 100%)])} corner_radii={ RectangleCornerRadii::radii(50.0,50.0,50.0,50.0) @@ -34,7 +34,7 @@ fill={Fill::linearGradient( (0%, 0%), (100%, 100%), - [GradientStop::get(Color::rgb(1.0,1.0,0.0), 0%), GradientStop::get(Color::rgb(1.0,0.0,1.0), 100%)])} + [GradientStop::get(Color::rgb(100.0%,100.0%,0.0%), 0%), GradientStop::get(Color::rgb(100.0%,0.0%,100.0%), 100%)])} /> @@ -49,7 +49,7 @@ fill={Fill::linearGradient( (0%, 0%), (100%, 100%), - [GradientStop::get(Color::rgb(0.0,1.0,1.0), 0%), GradientStop::get(Color::rgb(0.0,1.0,0.0), 100%)])} + [GradientStop::get(Color::rgb(0.0%,100.0%,100.0%), 0%), GradientStop::get(Color::rgb(0.0%,100.0%,0.0%), 100%)])} /> @@ -64,7 +64,7 @@ fill={Fill::linearGradient( (0%, 0%), (100%, 100%), - [GradientStop::get(Color::rgb(1.0,0.0,0.0), 0%), GradientStop::get(Color::rgb(0.0,1.0,1.0), 100%)])} + [GradientStop::get(Color::rgb(100.0%,0.0%,0.0%), 0%), GradientStop::get(Color::rgb(0.0%,100.0%,100.0%), 100%)])} /> @@ -79,7 +79,7 @@ fill={Fill::linearGradient( (0%, 0%), (100%, 100%), - [GradientStop::get(Color::rgb(1.0,0.0,1.0), 0%), GradientStop::get(Color::rgb(0.0,1.0,0.0), 100%)])} + [GradientStop::get(Color::rgb(100.0%,0.0%,100.0%), 0%), GradientStop::get(Color::rgb(0.0%,100.0%,0.0%), 100%)])} /> @@ -96,7 +96,7 @@ fill={Fill::linearGradient( (0%, 0%), (100%, 100%), - [GradientStop::get(Color::rgb(0.0,0.0,1.0), 0%), GradientStop::get(Color::rgb(1.0,1.0,0.0), 100%)])} + [GradientStop::get(Color::rgb(0.0%,0.0%,100.0%), 0%), GradientStop::get(Color::rgb(100.0%,100.0%,0.0%), 100%)])} /> @@ -108,7 +108,7 @@ style_link: { font: {Font::system("Helvetica", FontStyle::Normal, FontWeight::Bold)}, font_size: 22px, - fill: {Color::rgba(1.0,1.0,1.0,1.0)} + fill: {Color::rgba(100.0%,100.0%,100.0%,100.0%)} align_vertical: TextAlignVertical::Center, align_horizontal: TextAlignHorizontal::Center, underline: true @@ -147,7 +147,7 @@ style: { font: {Font::system("Helvetica", FontStyle::Normal, FontWeight::Bold)}, font_size: 72px, - fill: {Color::rgba(1.0,1.0,1.0,1.0)} + fill: {Color::rgba(100.0%,100.0%,100.0%,100.0%)} align_vertical: TextAlignVertical::Center, align_horizontal: TextAlignHorizontal::Center, align_multiline: TextAlignHorizontal::Center, @@ -158,7 +158,7 @@ style: { font: {Font::system("Helvetica", FontStyle::Italic, FontWeight::Bold)}, font_size: 72px, - fill: {Color::rgba(1.0,1.0,1.0,1.0)} + fill: {Color::rgba(100.0%,100.0%,1.0%,100.0%)} align_vertical: TextAlignVertical::Center, align_horizontal: TextAlignHorizontal::Center, align_multiline: TextAlignHorizontal::Center, @@ -169,7 +169,7 @@ style: { font: {Font::system("Helvetica", FontStyle::Normal, FontWeight::Bold)}, font_size: 54px, - fill: {Color::rgba(1.0,1.0,1.0,1.0)} + fill: {Color::rgba(100.0%,100.0%,100.0%,100.0%)} align_vertical: TextAlignVertical::Center, align_horizontal: TextAlignHorizontal::Center, align_multiline: TextAlignHorizontal::Center, @@ -180,7 +180,7 @@ style_link: { font: {Font::system("Helvetica", FontStyle::Normal, FontWeight::Bold)}, font_size: 36px, - fill: {Color::rgba(0.0,0.0,0.0,1.0)} + fill: {Color::rgba(0.0%,0.0%,0.0%,100.0%)} align_vertical: TextAlignVertical::Top, align_horizontal: TextAlignHorizontal::Center, align_multiline: TextAlignHorizontal::Center, @@ -192,7 +192,7 @@ style_link: { font: {Font::system("Helvetica", FontStyle::Normal, FontWeight::Bold)}, font_size: 36px, - fill: {Color::rgba(0.0,0.0,0.0,1.0)} + fill: {Color::rgba(0.0%,0.0%,0.0%,100.0%)} align_vertical: TextAlignVertical::Center, align_horizontal: TextAlignHorizontal::Center, align_multiline: TextAlignHorizontal::Center, @@ -204,7 +204,7 @@ style: { font: {Font::system("Helvetica", FontStyle::Normal, FontWeight::Normal)}, font_size: 28px, - fill: {Color::rgba(0.0,0.0,0.0,1.0)} + fill: {Color::rgba(0.0%,0.0%,0.0%,100.0%)} align_vertical: TextAlignVertical::Top, align_horizontal: TextAlignHorizontal::Left, align_multiline: TextAlignHorizontal::Left, @@ -215,7 +215,7 @@ style: { font: {Font::system("Helvetica", FontStyle::Normal, FontWeight::Normal)}, font_size: 20px, - fill: {Color::rgba(0.0,0.0,0.0,1.0)} + fill: {Color::rgba(0.0%,0.0%,0.0%,100.0%)} align_vertical: TextAlignVertical::Top, align_horizontal: TextAlignHorizontal::Left, align_multiline: TextAlignHorizontal::Left, diff --git a/pax-example/src/website_mobile.pax b/pax-example/src/website_mobile.pax index 25868ca95..379c76255 100644 --- a/pax-example/src/website_mobile.pax +++ b/pax-example/src/website_mobile.pax @@ -10,7 +10,7 @@ fill={Fill::linearGradient( (0%, 50%), (100%, 50%), - [GradientStop::get(Color::rgba(0.0,0.0,0.0,1.0), 0%), GradientStop::get(Color::rgba(0.0,0.0,0.0,0.5), 100%)])} + [GradientStop::get(Color::rgba(0.0%,0.0%,0.0%,100.0%), 0%), GradientStop::get(Color::rgba(0.0%,0.0%,0.0%,50.0%), 100%)])} corner_radii={ RectangleCornerRadii::radii(50.0,50.0,50.0,50.0) @@ -32,7 +32,7 @@ fill={Fill::linearGradient( (0%, 0%), (100%, 100%), - [GradientStop::get(Color::rgb(1.0,1.0,0.0), 0%), GradientStop::get(Color::rgb(1.0,0.0,1.0), 100%)])} + [GradientStop::get(Color::rgb(100.0%,100.0%,0.0%), 0%), GradientStop::get(Color::rgb(100.0%,0.0%,100.0%), 100%)])} /> @@ -47,7 +47,7 @@ fill={Fill::linearGradient( (0%, 0%), (100%, 100%), - [GradientStop::get(Color::rgb(0.0,1.0,1.0), 0%), GradientStop::get(Color::rgb(0.0,1.0,0.0), 100%)])} + [GradientStop::get(Color::rgb(0.0%,100.0%,100.0%), 0%), GradientStop::get(Color::rgb(0.0%,100.0%,0.0%), 100%)])} /> @@ -62,7 +62,7 @@ fill={Fill::linearGradient( (0%, 0%), (100%, 100%), - [GradientStop::get(Color::rgb(1.0,0.0,0.0), 0%), GradientStop::get(Color::rgb(0.0,1.0,1.0), 100%)])} + [GradientStop::get(Color::rgb(100.0%,0.0%,0.0%), 0%), GradientStop::get(Color::rgb(0.0%,100.0%,100.0%), 100%)])} /> @@ -77,7 +77,7 @@ fill={Fill::linearGradient( (0%, 0%), (100%, 100%), - [GradientStop::get(Color::rgb(1.0,0.0,1.0), 0%), GradientStop::get(Color::rgb(0.0,1.0,0.0), 100%)])} + [GradientStop::get(Color::rgb(100.0%,0.0%,100.0%), 0%), GradientStop::get(Color::rgb(0.0%,100.0%,0.0%), 100%)])} /> @@ -94,7 +94,7 @@ fill={Fill::linearGradient( (0%, 0%), (100%, 100%), - [GradientStop::get(Color::rgb(0.0,0.0,1.0), 0%), GradientStop::get(Color::rgb(1.0,1.0,0.0), 100%)])} + [GradientStop::get(Color::rgb(0.0%,0.0%,100.0%), 0%), GradientStop::get(Color::rgb(100.0%,100.0%,0.0%), 100%)])} /> @@ -108,7 +108,7 @@ style_link: { font: {Font::system("Helvetica", FontStyle::Normal, FontWeight::Bold)}, font_size: 22px, - fill: {Color::rgba(1.0,1.0,1.0,1.0)} + fill: {Color::rgba(100.0%,100.0%,100.0%,100.0%)} align_vertical: TextAlignVertical::Center, align_horizontal: TextAlignHorizontal::Center, underline: true @@ -151,7 +151,7 @@ style: { font: {Font::system("Helvetica", FontStyle::Normal, FontWeight::Bold)}, font_size: 52px, - fill: {Color::rgba(1.0,1.0,1.0,1.0)} + fill: {Color::rgba(100.0%,100.0%,100.0%,100.0%)} align_vertical: TextAlignVertical::Center, align_horizontal: TextAlignHorizontal::Center, align_multiline: TextAlignHorizontal::Center, @@ -162,7 +162,7 @@ style: { font: {Font::system("Helvetica", FontStyle::Italic, FontWeight::Bold)}, font_size: 34px, - fill: {Color::rgba(1.0,1.0,1.0,1.0)} + fill: {Color::rgba(100.0%,100.0%,100.0%,100.0%)} align_vertical: TextAlignVertical::Center, align_horizontal: TextAlignHorizontal::Center, align_multiline: TextAlignHorizontal::Center, @@ -173,7 +173,7 @@ style: { font: {Font::system("Helvetica", FontStyle::Normal, FontWeight::Bold)}, font_size: 54px, - fill: {Color::rgba(1.0,1.0,1.0,1.0)} + fill: {Color::rgba(100.0%,100.0%,100.0%,100.0%)} align_vertical: TextAlignVertical::Center, align_horizontal: TextAlignHorizontal::Center, align_multiline: TextAlignHorizontal::Center, @@ -184,7 +184,7 @@ style_link: { font: {Font::system("Helvetica", FontStyle::Normal, FontWeight::Bold)}, font_size: 36px, - fill: {Color::rgba(0.0,0.0,0.0,1.0)} + fill: {Color::rgba(0.0%,0.0%,0.0%,100.0%)} align_vertical: TextAlignVertical::Top, align_horizontal: TextAlignHorizontal::Center, align_multiline: TextAlignHorizontal::Center, @@ -196,7 +196,7 @@ style_link: { font: {Font::system("Helvetica", FontStyle::Normal, FontWeight::Bold)}, font_size: 40px, - fill: {Color::rgba(0.0,0.0,0.0,1.0)} + fill: {Color::rgba(0.0%,0.0%,0.0%,100.0%)} align_vertical: TextAlignVertical::Center, align_horizontal: TextAlignHorizontal::Center, align_multiline: TextAlignHorizontal::Center, @@ -208,7 +208,7 @@ style: { font: {Font::system("Helvetica", FontStyle::Normal, FontWeight::Normal)}, font_size: 20px, - fill: {Color::rgba(0.0,0.0,0.0,1.0)} + fill: {Color::rgba(0.0%,0.0%,0.0%,100.0%)} align_vertical: TextAlignVertical::Top, align_horizontal: TextAlignHorizontal::Left, align_multiline: TextAlignHorizontal::Left, @@ -219,7 +219,7 @@ style: { font: {Font::system("Helvetica", FontStyle::Normal, FontWeight::Normal)}, font_size: 20px, - fill: {Color::rgba(0.0,0.0,0.0,1.0)} + fill: {Color::rgba(0.0%,0.0%,0.0%,100.0%)} align_vertical: TextAlignVertical::Top, align_horizontal: TextAlignHorizontal::Left, align_multiline: TextAlignHorizontal::Left, From c2b22a25f5f42173acfffa5dac25003989fa14e6 Mon Sep 17 00:00:00 2001 From: ouz-a Date: Wed, 25 Oct 2023 13:39:13 +0300 Subject: [PATCH 06/11] add converter functions and use hsl to shade --- pax-std/src/types/mod.rs | 101 ++++++++++++++++++++++++++++++++++++--- 1 file changed, 95 insertions(+), 6 deletions(-) diff --git a/pax-std/src/types/mod.rs b/pax-std/src/types/mod.rs index 5d75605e8..b7949d3e4 100644 --- a/pax-std/src/types/mod.rs +++ b/pax-std/src/types/mod.rs @@ -201,6 +201,94 @@ impl Color { } } + /// Converts an RGB color to its HSL representation. + /// + /// This function takes in RGB values (each between 0 and 255) and returns the corresponding HSL values(between 0.0 and 1.0) + fn rgb_to_hsl(red: f64, green: f64, blue: f64) -> (f64, f64, f64) { + let normalized_red = red / 255.0; + let normalized_green = green / 255.0; + let normalized_blue = blue / 255.0; + + let color_max = normalized_red.max(normalized_green.max(normalized_blue)); + let color_min = normalized_red.min(normalized_green.min(normalized_blue)); + + let mut hue; + let saturation; + let lightness = (color_max + color_min) / 2.0; + + if color_max == color_min { + hue = 0.0; + saturation = 0.0; + } else { + let delta = color_max - color_min; + saturation = if lightness > 0.5 { + delta / (2.0 - color_max - color_min) + } else { + delta / (color_max + color_min) + }; + + hue = match color_max { + _ if color_max == normalized_red => { + (normalized_green - normalized_blue) / delta + + (if normalized_green < normalized_blue { + 6.0 + } else { + 0.0 + }) + } + _ if color_max == normalized_green => { + (normalized_blue - normalized_red) / delta + 2.0 + } + _ => (normalized_red - normalized_green) / delta + 4.0, + }; + + hue /= 6.0; + } + + (hue, saturation, lightness) + } + + /// Converts an HSL(values between 0.0 and 1.0) color to its RGB representation. + /// + /// Returns a tuple of `(red, green, blue)` where each value is between 0.0 and 255.0. + fn hsl_to_rgb(hue: f64, saturation: f64, lightness: f64) -> (f64, f64, f64) { + if saturation == 0.0 { + return (lightness * 255.0, lightness * 255.0, lightness * 255.0); + } + + let temp_q = if lightness < 0.5 { + lightness * (1.0 + saturation) + } else { + lightness + saturation - lightness * saturation + }; + + let temp_p = 2.0 * lightness - temp_q; + + let convert = |temp_hue: f64| -> f64 { + let mut temp_hue = temp_hue; + if temp_hue < 0.0 { + temp_hue += 1.0; + } + if temp_hue > 1.0 { + temp_hue -= 1.0; + } + if temp_hue < 1.0 / 6.0 { + return temp_p + (temp_q - temp_p) * 6.0 * temp_hue; + } + if temp_hue < 1.0 / 2.0 { + return temp_q; + } + if temp_hue < 2.0 / 3.0 { + return temp_p + (temp_q - temp_p) * (2.0 / 3.0 - temp_hue) * 6.0; + } + return temp_p; + }; + let red = (convert(hue + 1.0 / 3.0) * 255.0).min(255.0).max(0.0); + let green = (convert(hue) * 255.0).min(255.0).max(0.0); + let blue = (convert(hue - 1.0 / 3.0) * 255.0).min(255.0).max(0.0); + + (red, green, blue) + } /// Shades a given color by a specified value. /// @@ -209,13 +297,13 @@ impl Color { /// Accepted values are between 0 and 400, higher values result in a darker color. /// Most neutral color will be achieved at 275. pub fn shade(color: Color, shade: Numeric) -> Self { - let shade = 4.0 - (shade.get_as_float().clamp(0.0, 400.0) / 100.0); - let (r, g, b, a) = color.to_piet_color().as_rgba(); - let r = ((r * RGB) * shade) / RGB; - let g = ((g * RGB) * shade) / RGB; - let b = ((b * RGB) * shade) / RGB; + let shade_multp = (-0.002 * shade.get_as_float()) + 2.0; + let (r, g, b, _) = color.to_piet_color().as_rgba(); + let (h, s, l) = Self::rgb_to_hsl(r * 255.0, g * 255.0, b * 255.0); + let (r, g, b) = Self::hsl_to_rgb(h, s, l * shade_multp); + Self { - color_variant: ColorVariant::Rgba([r, g, b, a]), + color_variant: ColorVariant::Rgb([r / RGB, g / RGB, b / RGB]), } } @@ -329,6 +417,7 @@ impl Color { color_variant: ColorVariant::Rgb([244.0 / RGB, 63.0 / RGB, 94.0 / RGB]), } } + pub fn to_piet_color(&self) -> piet::Color { match self.color_variant { ColorVariant::Hlca(slice) => piet::Color::hlca(slice[0], slice[1], slice[2], slice[3]), From 7a074f6e9766abecc420b09025e0a2208e0cf8f2 Mon Sep 17 00:00:00 2001 From: ouz-a Date: Wed, 25 Oct 2023 14:11:32 +0300 Subject: [PATCH 07/11] allow coercion from color to fill --- pax-compiler/templates/cartridge-lib.tera | 2 +- pax-std/src/types/mod.rs | 6 ++++++ 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/pax-compiler/templates/cartridge-lib.tera b/pax-compiler/templates/cartridge-lib.tera index ab91f4c48..795f4b6ef 100644 --- a/pax-compiler/templates/cartridge-lib.tera +++ b/pax-compiler/templates/cartridge-lib.tera @@ -81,7 +81,7 @@ pub fn instantiate_expression_table() -> HashMap for Fill { + fn from(color: Color) -> Self { + Self::Solid(color) + } +} + impl Fill { pub fn to_unit_point((x, y): (Size, Size), (width, height): (f64, f64)) -> UnitPoint { let normalized_x = match x { From 334436edf1f35e5a624fc9a7c1010825342ffbeb Mon Sep 17 00:00:00 2001 From: ouz-a Date: Fri, 27 Oct 2023 15:10:56 +0300 Subject: [PATCH 08/11] parse all color formats --- pax-compiler/src/parsing.rs | 72 ++++++++++++++++++++++++++--- pax-compiler/src/pax.pest | 10 ++-- pax-example/src/website_desktop.pax | 28 +++++------ pax-example/src/website_mobile.pax | 28 +++++------ 4 files changed, 101 insertions(+), 37 deletions(-) diff --git a/pax-compiler/src/parsing.rs b/pax-compiler/src/parsing.rs index 5913f6273..8f7748a0d 100644 --- a/pax-compiler/src/parsing.rs +++ b/pax-compiler/src/parsing.rs @@ -85,7 +85,6 @@ fn recurse_pratt_parse_to_string<'a>( Rule::expression_grouped => { /* expression_grouped = { "(" ~ expression_body ~ ")" ~ literal_number_unit? } */ let mut inner = primary.into_inner(); - let exp_bod = recurse_pratt_parse_to_string(inner.next().unwrap().into_inner(), pratt_parser, Rc::clone(&symbolic_ids)); if let Some(literal_number_unit) = inner.next() { let unit = literal_number_unit.as_str(); @@ -110,10 +109,18 @@ fn recurse_pratt_parse_to_string<'a>( xo_function_args_list = {expression_body ~ ("," ~ expression_body)*} */ //prepend identifiers; recurse-pratt-parse `xo_function_args`' `expression_body`s - let mut pairs = primary.into_inner(); - + let mut pairs = primary.clone().into_inner(); let mut output = "".to_string(); let mut next_pair = pairs.next().unwrap(); + match next_pair.as_rule() { + Rule::literal_color => { + return recurse_pratt_parse_to_string(primary.into_inner(), pratt_parser, Rc::clone(&symbolic_ids)); + } + Rule::literal_hex_color => { + return recurse_pratt_parse_to_string(pairs, pratt_parser, Rc::clone(&symbolic_ids)); + } + _=>() + } while let Rule::identifier = next_pair.as_rule() { output = output + next_pair.as_str(); next_pair = pairs.next().unwrap(); @@ -172,8 +179,7 @@ fn recurse_pratt_parse_to_string<'a>( format!("{}", op0_out + &op1_out + &op2_out) }, Rule::xo_literal => { - let literal_kind = primary.into_inner().next().unwrap(); - + let literal_kind = primary.clone().into_inner().next().unwrap(); match literal_kind.as_rule() { Rule::literal_number_with_unit => { let mut inner = literal_kind.into_inner(); @@ -201,12 +207,34 @@ fn recurse_pratt_parse_to_string<'a>( Rule::string => { format!("StringBox::from({})",literal_kind.as_str().to_string()) }, + Rule::literal_color => { + return recurse_pratt_parse_to_string(literal_kind.into_inner(), pratt_parser, Rc::clone(&symbolic_ids)); + }, + Rule::literal_hex_color => { + return recurse_pratt_parse_to_string(primary.into_inner(), pratt_parser, Rc::clone(&symbolic_ids)); + } _ => { /* {literal_enum_value | literal_tuple_access | literal_tuple | string } */ literal_kind.as_str().to_string() } } }, + Rule::literal_color => { + let color_format = primary.as_str(); + return parse_rgb_color(primary,color_format); + }, + Rule::literal_hex_color => { + let hex = primary.as_str(); + let hex = hex.trim().trim_start_matches('#'); + let r = u8::from_str_radix(&hex[0..2], 16).expect("Invalid hex value for red") as f64; + let g = u8::from_str_radix(&hex[2..4], 16).expect("Invalid hex value for green") as f64; + let b = u8::from_str_radix(&hex[4..6], 16).expect("Invalid hex value for blue") as f64; + + let r = format!("Size::Percent({}.into())",(r/255.0)*100.0); + let g = format!("Size::Percent({}.into())",(g/255.0)*100.0); + let b = format!("Size::Percent({}.into())",(b/255.0)*100.0); + format!("Color::rgb({r},{g},{b}).into()") + } Rule::xo_object => { let mut output : String = "".to_string(); @@ -269,7 +297,8 @@ fn recurse_pratt_parse_to_string<'a>( Rule::expression_body => { recurse_pratt_parse_to_string(primary.into_inner(), pratt_parser, Rc::clone(&symbolic_ids)) }, - _ => unreachable!("{}",primary.as_str()), + + _ => unreachable!("{:#?}",primary.as_str()), }) .map_prefix(|op, rhs| match op.as_rule() { Rule::xo_neg => format!("(-{})", rhs), @@ -302,6 +331,37 @@ fn recurse_pratt_parse_to_string<'a>( .parse(expression) } +fn parse_rgb_color(color: Pair<'_, Rule>, color_format: &str) -> String { + let mut inner = color.into_inner(); + + let r = inner.next().unwrap().as_str().replace("%", ""); + let g = inner.next().unwrap().as_str().replace("%", ""); + let b = inner.next().unwrap().as_str().replace("%", ""); + let a = inner + .next() + .map(|x| x.as_str().replace("%", "")) + .unwrap_or("1".to_string()); + + let r = format!("Size::Percent({}.into())", r); + let g = format!("Size::Percent({}.into())", g); + let b = format!("Size::Percent({}.into())", b); + let a = format!("Size::Percent({}.into())", a); + + let comma_count = color_format.chars().filter(|&c| c == ',').count(); + + if color_format.starts_with("rgb(") && comma_count == 2 { + format!("Color::rgb({r},{g},{b}).into()") + } else if color_format.starts_with("rgba(") && comma_count == 3 { + format!("Color::rgba({r},{g},{b},{a}).into()") + } else if color_format.starts_with("hlc(") && comma_count == 2 { + format!("Color::hlc({r},{g},{b}).into()") + } else if color_format.starts_with("hlca(") && comma_count == 3 { + format!("Color::hlca({r},{g},{b},{a}).into()") + } else { + panic!("Invalid color format: {}", color_format) + } +} + fn parse_template_from_component_definition_string(ctx: &mut TemplateNodeParseContext, pax: &str) { let pax_component_definition = PaxParser::parse(Rule::pax_component_definition, pax) .expect(&format!("unsuccessful parse from {}", &pax)) // unwrap the parse result diff --git a/pax-compiler/src/pax.pest b/pax-compiler/src/pax.pest index 65ff8a3a2..9f29fd12a 100644 --- a/pax-compiler/src/pax.pest +++ b/pax-compiler/src/pax.pest @@ -107,7 +107,7 @@ handlers_value = { literal_function | function_list } literal_function = { "self."? ~ identifier ~ ","? } function_list = {"[" ~ literal_function* ~ "]"} -literal_value = { literal_number_with_unit | literal_number | literal_tuple | literal_enum_value | literal_boolean | string } +literal_value = { literal_number_with_unit | literal_number | literal_color | literal_hex_color | literal_enum_value | literal_boolean | string | literal_tuple} literal_number_with_unit = { literal_number ~ literal_number_unit } literal_number = {"-"? ~ (literal_number_float | literal_number_integer)} literal_number_integer = {(!(".") ~ ASCII_DIGIT)+ } @@ -115,6 +115,10 @@ literal_number_float = {ASCII_DIGIT* ~ "." ~ ASCII_DIGIT+} literal_number_unit = {("%" | "px" | "deg" | "rad")} literal_tuple = {("(") ~ literal_value ~ ("," ~ literal_value)* ~ (")")} literal_boolean = {("true" | "false")} +//some_color = {("rgb(")) | ("rgba(")) | ("hlc(")) | ("hlca(")) } +literal_color = {(("rgb(") | ("rgba(")| ("hlc(")| ("hlca(")) ~ literal_number_with_unit ~ ("," ~ literal_number_with_unit)* ~ ("," ~ literal_number_with_unit)* ~ (")")} +literal_mixed_hex = { '0'..'9' | (('a'..'f') | ('A'..'F'))} +literal_hex_color = {"#" ~ literal_mixed_hex{6}} //Enums like Orientation::Vertical or Color::Rgba(100%, 100%, 0, 0) @@ -215,7 +219,7 @@ xo_range = { (xo_literal | xo_symbol) ~ (xo_range_exclusive) ~ (xo_literal | xo_ xo_range_exclusive = @{".."} // xo_range_inclusive = @{"..="} -xo_literal = {literal_enum_value | literal_tuple_access | literal_number_with_unit | literal_number | string | literal_tuple } +xo_literal = {literal_enum_value | literal_tuple_access | literal_number_with_unit | literal_number | string | literal_tuple | literal_color | literal_hex_color } //objects may recurse into arbitrary expressions for any value -- consider the `key_2` in: // `some_prop={ TypedReturn {key_0: 0, key_1: "one", key_2: 1.0 + 1.0} }` @@ -226,7 +230,7 @@ xo_symbol = { "$"? ~ identifier ~ (("." ~ identifier) | ("[" ~ expression_body ~ xo_tuple = { "(" ~ expression_body ~ ("," ~ expression_body)* ~ ")"} xo_list = { "[" ~ (expression_body ~ ("," ~ expression_body)*)? ~ "]" } -xo_function_call = {identifier ~ (("::") ~ identifier)* ~ ("("~xo_function_args_list~")")} +xo_function_call = { literal_color | identifier ~ (("::") ~ identifier)* ~ ("("~xo_function_args_list~")")} xo_function_args_list = {(expression_body ~ ("," ~ expression_body)*)?} ////// ////// ////// diff --git a/pax-example/src/website_desktop.pax b/pax-example/src/website_desktop.pax index 35501d708..15f4eeb50 100644 --- a/pax-example/src/website_desktop.pax +++ b/pax-example/src/website_desktop.pax @@ -12,7 +12,7 @@ fill={Fill::linearGradient( (0%, 50%), (100%, 50%), - [GradientStop::get(Color::rgba(0.0%,0.0%,0.0%,100.0%), 0%), GradientStop::get(Color::rgba(0.0%,0.0%,0.0%,50.0%), 100%)])} + [GradientStop::get(Color::rgba(0.0,0.0,0.0,1.0), 0%), GradientStop::get(Color::rgba(0.0,0.0,0.0,0.5), 100%)])} corner_radii={ RectangleCornerRadii::radii(50.0,50.0,50.0,50.0) @@ -34,7 +34,7 @@ fill={Fill::linearGradient( (0%, 0%), (100%, 100%), - [GradientStop::get(Color::rgb(100.0%,100.0%,0.0%), 0%), GradientStop::get(Color::rgb(100.0%,0.0%,100.0%), 100%)])} + [GradientStop::get(Color::rgb(1.0,1.0,0.0), 0%), GradientStop::get(Color::rgb(1.0,0.0,1.0), 100%)])} /> @@ -49,7 +49,7 @@ fill={Fill::linearGradient( (0%, 0%), (100%, 100%), - [GradientStop::get(Color::rgb(0.0%,100.0%,100.0%), 0%), GradientStop::get(Color::rgb(0.0%,100.0%,0.0%), 100%)])} + [GradientStop::get(Color::rgb(0.0,1.0,1.0), 0%), GradientStop::get(Color::rgb(0.0,1.0,0.0), 100%)])} /> @@ -64,7 +64,7 @@ fill={Fill::linearGradient( (0%, 0%), (100%, 100%), - [GradientStop::get(Color::rgb(100.0%,0.0%,0.0%), 0%), GradientStop::get(Color::rgb(0.0%,100.0%,100.0%), 100%)])} + [GradientStop::get(Color::rgb(1.0,0.0,0.0), 0%), GradientStop::get(Color::rgb(0.0,1.0,1.0), 100%)])} /> @@ -79,7 +79,7 @@ fill={Fill::linearGradient( (0%, 0%), (100%, 100%), - [GradientStop::get(Color::rgb(100.0%,0.0%,100.0%), 0%), GradientStop::get(Color::rgb(0.0%,100.0%,0.0%), 100%)])} + [GradientStop::get(Color::rgb(1.0,0.0,1.0), 0%), GradientStop::get(Color::rgb(0.0,1.0,0.0), 100%)])} /> @@ -96,7 +96,7 @@ fill={Fill::linearGradient( (0%, 0%), (100%, 100%), - [GradientStop::get(Color::rgb(0.0%,0.0%,100.0%), 0%), GradientStop::get(Color::rgb(100.0%,100.0%,0.0%), 100%)])} + [GradientStop::get(Color::rgb(0.0,0.0,1.0), 0%), GradientStop::get(Color::rgb(1.0,1.0,0.0), 100%)])} /> @@ -108,7 +108,7 @@ style_link: { font: {Font::system("Helvetica", FontStyle::Normal, FontWeight::Bold)}, font_size: 22px, - fill: {Color::rgba(100.0%,100.0%,100.0%,100.0%)} + fill: {Color::rgba(1.0,1.0,1.0,1.0)} align_vertical: TextAlignVertical::Center, align_horizontal: TextAlignHorizontal::Center, underline: true @@ -147,7 +147,7 @@ style: { font: {Font::system("Helvetica", FontStyle::Normal, FontWeight::Bold)}, font_size: 72px, - fill: {Color::rgba(100.0%,100.0%,100.0%,100.0%)} + fill: {Color::rgba(1.0,1.0,1.0,1.0)} align_vertical: TextAlignVertical::Center, align_horizontal: TextAlignHorizontal::Center, align_multiline: TextAlignHorizontal::Center, @@ -158,7 +158,7 @@ style: { font: {Font::system("Helvetica", FontStyle::Italic, FontWeight::Bold)}, font_size: 72px, - fill: {Color::rgba(100.0%,100.0%,1.0%,100.0%)} + fill: {Color::rgba(1.0,1.0,1.0,1.0)} align_vertical: TextAlignVertical::Center, align_horizontal: TextAlignHorizontal::Center, align_multiline: TextAlignHorizontal::Center, @@ -169,7 +169,7 @@ style: { font: {Font::system("Helvetica", FontStyle::Normal, FontWeight::Bold)}, font_size: 54px, - fill: {Color::rgba(100.0%,100.0%,100.0%,100.0%)} + fill: {Color::rgba(1.0,1.0,1.0,1.0)} align_vertical: TextAlignVertical::Center, align_horizontal: TextAlignHorizontal::Center, align_multiline: TextAlignHorizontal::Center, @@ -180,7 +180,7 @@ style_link: { font: {Font::system("Helvetica", FontStyle::Normal, FontWeight::Bold)}, font_size: 36px, - fill: {Color::rgba(0.0%,0.0%,0.0%,100.0%)} + fill: {Color::rgba(0.0,0.0,0.0,1.0)} align_vertical: TextAlignVertical::Top, align_horizontal: TextAlignHorizontal::Center, align_multiline: TextAlignHorizontal::Center, @@ -192,7 +192,7 @@ style_link: { font: {Font::system("Helvetica", FontStyle::Normal, FontWeight::Bold)}, font_size: 36px, - fill: {Color::rgba(0.0%,0.0%,0.0%,100.0%)} + fill: {Color::rgba(0.0,0.0,0.0,1.0)} align_vertical: TextAlignVertical::Center, align_horizontal: TextAlignHorizontal::Center, align_multiline: TextAlignHorizontal::Center, @@ -204,7 +204,7 @@ style: { font: {Font::system("Helvetica", FontStyle::Normal, FontWeight::Normal)}, font_size: 28px, - fill: {Color::rgba(0.0%,0.0%,0.0%,100.0%)} + fill: {Color::rgba(0.0,0.0,0.0,1.0)} align_vertical: TextAlignVertical::Top, align_horizontal: TextAlignHorizontal::Left, align_multiline: TextAlignHorizontal::Left, @@ -215,7 +215,7 @@ style: { font: {Font::system("Helvetica", FontStyle::Normal, FontWeight::Normal)}, font_size: 20px, - fill: {Color::rgba(0.0%,0.0%,0.0%,100.0%)} + fill: {Color::rgba(0.0,0.0,0.0,1.0)} align_vertical: TextAlignVertical::Top, align_horizontal: TextAlignHorizontal::Left, align_multiline: TextAlignHorizontal::Left, diff --git a/pax-example/src/website_mobile.pax b/pax-example/src/website_mobile.pax index 379c76255..25868ca95 100644 --- a/pax-example/src/website_mobile.pax +++ b/pax-example/src/website_mobile.pax @@ -10,7 +10,7 @@ fill={Fill::linearGradient( (0%, 50%), (100%, 50%), - [GradientStop::get(Color::rgba(0.0%,0.0%,0.0%,100.0%), 0%), GradientStop::get(Color::rgba(0.0%,0.0%,0.0%,50.0%), 100%)])} + [GradientStop::get(Color::rgba(0.0,0.0,0.0,1.0), 0%), GradientStop::get(Color::rgba(0.0,0.0,0.0,0.5), 100%)])} corner_radii={ RectangleCornerRadii::radii(50.0,50.0,50.0,50.0) @@ -32,7 +32,7 @@ fill={Fill::linearGradient( (0%, 0%), (100%, 100%), - [GradientStop::get(Color::rgb(100.0%,100.0%,0.0%), 0%), GradientStop::get(Color::rgb(100.0%,0.0%,100.0%), 100%)])} + [GradientStop::get(Color::rgb(1.0,1.0,0.0), 0%), GradientStop::get(Color::rgb(1.0,0.0,1.0), 100%)])} /> @@ -47,7 +47,7 @@ fill={Fill::linearGradient( (0%, 0%), (100%, 100%), - [GradientStop::get(Color::rgb(0.0%,100.0%,100.0%), 0%), GradientStop::get(Color::rgb(0.0%,100.0%,0.0%), 100%)])} + [GradientStop::get(Color::rgb(0.0,1.0,1.0), 0%), GradientStop::get(Color::rgb(0.0,1.0,0.0), 100%)])} /> @@ -62,7 +62,7 @@ fill={Fill::linearGradient( (0%, 0%), (100%, 100%), - [GradientStop::get(Color::rgb(100.0%,0.0%,0.0%), 0%), GradientStop::get(Color::rgb(0.0%,100.0%,100.0%), 100%)])} + [GradientStop::get(Color::rgb(1.0,0.0,0.0), 0%), GradientStop::get(Color::rgb(0.0,1.0,1.0), 100%)])} /> @@ -77,7 +77,7 @@ fill={Fill::linearGradient( (0%, 0%), (100%, 100%), - [GradientStop::get(Color::rgb(100.0%,0.0%,100.0%), 0%), GradientStop::get(Color::rgb(0.0%,100.0%,0.0%), 100%)])} + [GradientStop::get(Color::rgb(1.0,0.0,1.0), 0%), GradientStop::get(Color::rgb(0.0,1.0,0.0), 100%)])} /> @@ -94,7 +94,7 @@ fill={Fill::linearGradient( (0%, 0%), (100%, 100%), - [GradientStop::get(Color::rgb(0.0%,0.0%,100.0%), 0%), GradientStop::get(Color::rgb(100.0%,100.0%,0.0%), 100%)])} + [GradientStop::get(Color::rgb(0.0,0.0,1.0), 0%), GradientStop::get(Color::rgb(1.0,1.0,0.0), 100%)])} /> @@ -108,7 +108,7 @@ style_link: { font: {Font::system("Helvetica", FontStyle::Normal, FontWeight::Bold)}, font_size: 22px, - fill: {Color::rgba(100.0%,100.0%,100.0%,100.0%)} + fill: {Color::rgba(1.0,1.0,1.0,1.0)} align_vertical: TextAlignVertical::Center, align_horizontal: TextAlignHorizontal::Center, underline: true @@ -151,7 +151,7 @@ style: { font: {Font::system("Helvetica", FontStyle::Normal, FontWeight::Bold)}, font_size: 52px, - fill: {Color::rgba(100.0%,100.0%,100.0%,100.0%)} + fill: {Color::rgba(1.0,1.0,1.0,1.0)} align_vertical: TextAlignVertical::Center, align_horizontal: TextAlignHorizontal::Center, align_multiline: TextAlignHorizontal::Center, @@ -162,7 +162,7 @@ style: { font: {Font::system("Helvetica", FontStyle::Italic, FontWeight::Bold)}, font_size: 34px, - fill: {Color::rgba(100.0%,100.0%,100.0%,100.0%)} + fill: {Color::rgba(1.0,1.0,1.0,1.0)} align_vertical: TextAlignVertical::Center, align_horizontal: TextAlignHorizontal::Center, align_multiline: TextAlignHorizontal::Center, @@ -173,7 +173,7 @@ style: { font: {Font::system("Helvetica", FontStyle::Normal, FontWeight::Bold)}, font_size: 54px, - fill: {Color::rgba(100.0%,100.0%,100.0%,100.0%)} + fill: {Color::rgba(1.0,1.0,1.0,1.0)} align_vertical: TextAlignVertical::Center, align_horizontal: TextAlignHorizontal::Center, align_multiline: TextAlignHorizontal::Center, @@ -184,7 +184,7 @@ style_link: { font: {Font::system("Helvetica", FontStyle::Normal, FontWeight::Bold)}, font_size: 36px, - fill: {Color::rgba(0.0%,0.0%,0.0%,100.0%)} + fill: {Color::rgba(0.0,0.0,0.0,1.0)} align_vertical: TextAlignVertical::Top, align_horizontal: TextAlignHorizontal::Center, align_multiline: TextAlignHorizontal::Center, @@ -196,7 +196,7 @@ style_link: { font: {Font::system("Helvetica", FontStyle::Normal, FontWeight::Bold)}, font_size: 40px, - fill: {Color::rgba(0.0%,0.0%,0.0%,100.0%)} + fill: {Color::rgba(0.0,0.0,0.0,1.0)} align_vertical: TextAlignVertical::Center, align_horizontal: TextAlignHorizontal::Center, align_multiline: TextAlignHorizontal::Center, @@ -208,7 +208,7 @@ style: { font: {Font::system("Helvetica", FontStyle::Normal, FontWeight::Normal)}, font_size: 20px, - fill: {Color::rgba(0.0%,0.0%,0.0%,100.0%)} + fill: {Color::rgba(0.0,0.0,0.0,1.0)} align_vertical: TextAlignVertical::Top, align_horizontal: TextAlignHorizontal::Left, align_multiline: TextAlignHorizontal::Left, @@ -219,7 +219,7 @@ style: { font: {Font::system("Helvetica", FontStyle::Normal, FontWeight::Normal)}, font_size: 20px, - fill: {Color::rgba(0.0%,0.0%,0.0%,100.0%)} + fill: {Color::rgba(0.0,0.0,0.0,1.0)} align_vertical: TextAlignVertical::Top, align_horizontal: TextAlignHorizontal::Left, align_multiline: TextAlignHorizontal::Left, From 95c69e53a5ce644709816cebc4a790128c95a30c Mon Sep 17 00:00:00 2001 From: ouz-a Date: Fri, 27 Oct 2023 15:41:09 +0300 Subject: [PATCH 09/11] cleaning --- pax-compiler/src/pax.pest | 1 - pax-std/src/types/mod.rs | 4 ++-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/pax-compiler/src/pax.pest b/pax-compiler/src/pax.pest index 9f29fd12a..0e7c59ff3 100644 --- a/pax-compiler/src/pax.pest +++ b/pax-compiler/src/pax.pest @@ -115,7 +115,6 @@ literal_number_float = {ASCII_DIGIT* ~ "." ~ ASCII_DIGIT+} literal_number_unit = {("%" | "px" | "deg" | "rad")} literal_tuple = {("(") ~ literal_value ~ ("," ~ literal_value)* ~ (")")} literal_boolean = {("true" | "false")} -//some_color = {("rgb(")) | ("rgba(")) | ("hlc(")) | ("hlca(")) } literal_color = {(("rgb(") | ("rgba(")| ("hlc(")| ("hlca(")) ~ literal_number_with_unit ~ ("," ~ literal_number_with_unit)* ~ ("," ~ literal_number_with_unit)* ~ (")")} literal_mixed_hex = { '0'..'9' | (('a'..'f') | ('A'..'F'))} literal_hex_color = {"#" ~ literal_mixed_hex{6}} diff --git a/pax-std/src/types/mod.rs b/pax-std/src/types/mod.rs index 9e3d2a16f..255318e25 100644 --- a/pax-std/src/types/mod.rs +++ b/pax-std/src/types/mod.rs @@ -300,8 +300,8 @@ impl Color { /// /// * `color` - A `Color` struct representing the color to be shaded. /// * `shade` - A `Numeric` struct representing the value by which to shade the color of. - /// Accepted values are between 0 and 400, higher values result in a darker color. - /// Most neutral color will be achieved at 275. + /// Accepted values are between 0 and 1000, higher values result in a darker color. + /// Most neutral color will be achieved at 500. pub fn shade(color: Color, shade: Numeric) -> Self { let shade_multp = (-0.002 * shade.get_as_float()) + 2.0; let (r, g, b, _) = color.to_piet_color().as_rgba(); From 1dd95c4fedce140c826f9ec234386096d0e8b39b Mon Sep 17 00:00:00 2001 From: ouz-a Date: Sat, 28 Oct 2023 00:09:38 +0300 Subject: [PATCH 10/11] remove extra `into()` and cover `xo_function`Color --- pax-compiler/src/parsing.rs | 8 ++++++++ pax-compiler/templates/cartridge-lib.tera | 2 +- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/pax-compiler/src/parsing.rs b/pax-compiler/src/parsing.rs index 8f7748a0d..26e8be2ee 100644 --- a/pax-compiler/src/parsing.rs +++ b/pax-compiler/src/parsing.rs @@ -112,6 +112,11 @@ fn recurse_pratt_parse_to_string<'a>( let mut pairs = primary.clone().into_inner(); let mut output = "".to_string(); let mut next_pair = pairs.next().unwrap(); + let mut add_into = false; + // This helps us transform `Color` into `Fill` in the cases of `{Color::rgb(...)}` + if next_pair.as_str() == "Color" { + add_into = true; + } match next_pair.as_rule() { Rule::literal_color => { return recurse_pratt_parse_to_string(primary.into_inner(), pratt_parser, Rc::clone(&symbolic_ids)); @@ -137,6 +142,9 @@ fn recurse_pratt_parse_to_string<'a>( output = output + "(" + &recurse_pratt_parse_to_string(next_pair.into_inner(), pratt_parser, Rc::clone(&symbolic_ids)) + ")," } output = output + ")"; + if add_into { + output = output + ".into()" + } output }, diff --git a/pax-compiler/templates/cartridge-lib.tera b/pax-compiler/templates/cartridge-lib.tera index 795f4b6ef..ab91f4c48 100644 --- a/pax-compiler/templates/cartridge-lib.tera +++ b/pax-compiler/templates/cartridge-lib.tera @@ -81,7 +81,7 @@ pub fn instantiate_expression_table() -> HashMap Date: Sat, 28 Oct 2023 23:42:24 +0300 Subject: [PATCH 11/11] add `xo_color_function` --- pax-compiler/src/parsing.rs | 13 +++++++++++++ pax-compiler/src/pax.pest | 5 +++-- 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/pax-compiler/src/parsing.rs b/pax-compiler/src/parsing.rs index 26e8be2ee..ab07e65de 100644 --- a/pax-compiler/src/parsing.rs +++ b/pax-compiler/src/parsing.rs @@ -124,6 +124,11 @@ fn recurse_pratt_parse_to_string<'a>( Rule::literal_hex_color => { return recurse_pratt_parse_to_string(pairs, pratt_parser, Rc::clone(&symbolic_ids)); } + Rule::xo_color_function => { + let primary = primary.into_inner().next().unwrap(); + pairs = primary.into_inner(); + next_pair = pairs.next().unwrap(); + } _=>() } while let Rule::identifier = next_pair.as_rule() { @@ -135,6 +140,14 @@ fn recurse_pratt_parse_to_string<'a>( } }; + while let Rule::literal_color_prefix = next_pair.as_rule() { + output = "Color::".to_owned() + &output + next_pair.as_str(); + next_pair = pairs.next().unwrap(); + if let Rule::literal_color_prefix = next_pair.as_rule() { + output = output + "::"; + } + }; + let mut expression_body_pairs = next_pair.into_inner(); output = output + "("; diff --git a/pax-compiler/src/pax.pest b/pax-compiler/src/pax.pest index 0e7c59ff3..457889580 100644 --- a/pax-compiler/src/pax.pest +++ b/pax-compiler/src/pax.pest @@ -1,4 +1,3 @@ - WHITESPACE = _{ " " | "\t" | "\r" | NEWLINE } COMMENT = _{ ( "/*" ~ (!"*/" ~ ANY)* ~ "*/" ) | ("//" ~ (!(NEWLINE) ~ ANY)* ~ NEWLINE) } @@ -115,6 +114,7 @@ literal_number_float = {ASCII_DIGIT* ~ "." ~ ASCII_DIGIT+} literal_number_unit = {("%" | "px" | "deg" | "rad")} literal_tuple = {("(") ~ literal_value ~ ("," ~ literal_value)* ~ (")")} literal_boolean = {("true" | "false")} +literal_color_prefix = {("rgb" | "rgba" | "hlc" | "hlca")} literal_color = {(("rgb(") | ("rgba(")| ("hlc(")| ("hlca(")) ~ literal_number_with_unit ~ ("," ~ literal_number_with_unit)* ~ ("," ~ literal_number_with_unit)* ~ (")")} literal_mixed_hex = { '0'..'9' | (('a'..'f') | ('A'..'F'))} literal_hex_color = {"#" ~ literal_mixed_hex{6}} @@ -228,8 +228,9 @@ xo_object_settings_key_value_pair = { settings_key ~ expression_body ~ ","? } xo_symbol = { "$"? ~ identifier ~ (("." ~ identifier) | ("[" ~ expression_body ~ "]") )* } xo_tuple = { "(" ~ expression_body ~ ("," ~ expression_body)* ~ ")"} xo_list = { "[" ~ (expression_body ~ ("," ~ expression_body)*)? ~ "]" } +xo_color_function = {literal_color_prefix ~ ("("~xo_function_args_list~")")} -xo_function_call = { literal_color | identifier ~ (("::") ~ identifier)* ~ ("("~xo_function_args_list~")")} +xo_function_call = { literal_color | xo_color_function | identifier ~ (("::") ~ identifier)* ~ ("("~xo_function_args_list~")")} xo_function_args_list = {(expression_body ~ ("," ~ expression_body)*)?} ////// ////// //////