From bd57939ef3d6a49e80a2787955724d7377435d9a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Martin=20Kav=C3=ADk?= Date: Sat, 14 Sep 2024 18:51:03 +0200 Subject: [PATCH] HTML colors updated --- backend/style.css | 5 +++-- frontend/src/controls_panel.rs | 12 ++++++------ frontend/src/header_panel.rs | 18 +++++++++--------- frontend/src/main.rs | 4 ++-- frontend/src/theme.rs | 31 +++++++++++++++++-------------- frontend/src/waveform_panel.rs | 12 ++++++------ 6 files changed, 43 insertions(+), 39 deletions(-) diff --git a/backend/style.css b/backend/style.css index d78ea00..719f592 100644 --- a/backend/style.css +++ b/backend/style.css @@ -1,3 +1,4 @@ html { - background-color: DarkSlateBlue; -} \ No newline at end of file + /* background-color: DarkSlateBlue; */ + background-color: oklch(41.43% 0.125 262.26); +} diff --git a/frontend/src/controls_panel.rs b/frontend/src/controls_panel.rs index 521acdd..3fc8477 100644 --- a/frontend/src/controls_panel.rs +++ b/frontend/src/controls_panel.rs @@ -1,4 +1,4 @@ -use crate::{Filename, Layout}; +use crate::{Filename, Layout, theme::*}; use std::cell::Cell; use std::mem; use std::ops::Not; @@ -238,9 +238,9 @@ impl ControlsPanel { let background_color = map_ref! { let is_selected = is_selected, let is_hovered = button_hovered_signal => match (*is_selected, *is_hovered) { - (true, _) => color!("BlueViolet"), - (false, true) => color!("MediumSlateBlue"), - (false, false) => color!("SlateBlue"), + (true, _) => COLOR_BLUE_VIOLET, + (false, true) => COLOR_MEDIUM_SLATE_BLUE, + (false, false) => COLOR_SLATE_BLUE, } }; let task_collapse_on_parent_collapse = { @@ -332,7 +332,7 @@ impl ControlsPanel { .map_true(|| 10), )) .s(Height::fill()) - .s(Font::new().color_signal(hovered_signal.map_true(|| color!("LightBlue")))) + .s(Font::new().color_signal(hovered_signal.map_true(|| COLOR_LIGHT_BLUE))) .label( El::new() .s(Transform::with_signal_self(layout_and_expanded.map( @@ -488,7 +488,7 @@ impl ControlsPanel { Button::new() .s(Padding::new().x(15).y(5)) .s(Background::new().color_signal( - hovered_signal.map_bool(|| color!("MediumSlateBlue"), || color!("SlateBlue")), + hovered_signal.map_bool(|| COLOR_MEDIUM_SLATE_BLUE, || COLOR_SLATE_BLUE), )) .s(RoundedCorners::all(15)) .on_hovered_change(move |is_hovered| hovered.set_neq(is_hovered)) diff --git a/frontend/src/header_panel.rs b/frontend/src/header_panel.rs index 3becd90..08a5667 100644 --- a/frontend/src/header_panel.rs +++ b/frontend/src/header_panel.rs @@ -1,4 +1,4 @@ -use crate::{platform, script_bridge, Filename, Layout}; +use crate::{platform, script_bridge, Filename, Layout, theme::*}; use std::sync::Arc; use zoon::*; @@ -45,7 +45,7 @@ impl HeaderPanel { Button::new() .s(Padding::new().x(20).y(10)) .s(Background::new().color_signal( - hovered_signal.map_bool(|| color!("MediumSlateBlue"), || color!("SlateBlue")), + hovered_signal.map_bool(|| COLOR_MEDIUM_SLATE_BLUE, || COLOR_SLATE_BLUE), )) .s(Align::new().left()) .s(RoundedCorners::all(15)) @@ -86,7 +86,7 @@ impl HeaderPanel { .s(Padding::new().x(20).y(10)) .s(Background::new().color_signal( hovered_signal - .map_bool(|| color!("MediumSlateBlue"), || color!("SlateBlue")), + .map_bool(|| COLOR_MEDIUM_SLATE_BLUE, || COLOR_SLATE_BLUE), )) .s(Align::new().left()) .s(RoundedCorners::all(15)) @@ -154,7 +154,7 @@ impl HeaderPanel { Button::new() .s(Padding::new().x(20).y(10)) .s(Background::new().color_signal( - hovered_signal.map_bool(|| color!("MediumSlateBlue"), || color!("SlateBlue")), + hovered_signal.map_bool(|| COLOR_MEDIUM_SLATE_BLUE, || COLOR_SLATE_BLUE), )) .s(RoundedCorners::all(15)) .label_signal(layout.signal().map(|layout| match layout { @@ -206,7 +206,7 @@ impl HeaderPanel { let (script, script_signal) = Mutable::new_and_signal_cloned(String::new()); // @TODO perhaps replace with an element with syntax highlighter like https://github.com/WebCoder49/code-input later TextArea::new() - .s(Background::new().color(color!("SlateBlue"))) + .s(Background::new().color(COLOR_SLATE_BLUE)) .s(Padding::new().x(10).y(8)) .s(RoundedCorners::all(15)) .s(Height::default().min(50)) @@ -214,11 +214,11 @@ impl HeaderPanel { .s(Font::new() .tracking(1) .weight(FontWeight::Medium) - .color(color!("White")) + .color(COLOR_WHITE) .family([FontFamily::new("Courier New"), FontFamily::Monospace])) .s(Shadows::new([Shadow::new() .inner() - .color(color!("DarkSlateBlue")) + .color(COLOR_DARK_SLATE_BLUE) .blur(4)])) // @TODO `spellcheck` and `resize` to MZ API? (together with autocomplete and others?) .update_raw_el(|raw_el| { @@ -227,7 +227,7 @@ impl HeaderPanel { .style("resize", "vertical") }) .placeholder( - Placeholder::new("FW.say_hello()").s(Font::new().color(color!("LightBlue"))), + Placeholder::new("FW.say_hello()").s(Font::new().color(COLOR_LIGHT_BLUE)), ) .label_hidden("command editor panel") .text_signal(script_signal) @@ -272,7 +272,7 @@ impl HeaderPanel { .s(Font::new() .tracking(1) .weight(FontWeight::Medium) - .color(color!("White")) + .color(COLOR_WHITE) .family([FontFamily::new("Courier New"), FontFamily::Monospace])) .s(Scrollbars::both()) .s(Height::default().max(100)) diff --git a/frontend/src/main.rs b/frontend/src/main.rs index 839cd8f..a398435 100644 --- a/frontend/src/main.rs +++ b/frontend/src/main.rs @@ -13,7 +13,7 @@ use waveform_panel::{PixiController, WaveformPanel}; mod header_panel; use header_panel::HeaderPanel; -mod theme; +pub mod theme; use theme::*; #[derive(Clone, Copy, Default)] @@ -53,7 +53,7 @@ fn root() -> impl Element { Column::new() .s(Height::fill()) .s(Scrollbars::y_and_clip_x()) - .s(Font::new().color(color!("Lavender"))) + .s(Font::new().color(COLOR_LAVENDER)) .item(HeaderPanel::new( hierarchy.clone(), layout.clone(), diff --git a/frontend/src/theme.rs b/frontend/src/theme.rs index d8fcd63..93bd456 100644 --- a/frontend/src/theme.rs +++ b/frontend/src/theme.rs @@ -2,23 +2,26 @@ use zoon::*; // https://oklch.com/ -// const COLOR_BLUE_VIOLET: Rgba = color!("BlueViolet"); // oklch(53.38% 0.25 301.37) -const COLOR_BLUE_VIOLET: Oklch = color!("oklch(53.38% 0.25 262.59)"); +// pub const COLOR_BLUE_VIOLET: Rgba = color!("BlueViolet"); // oklch(53.38% 0.25 301.37) +pub const COLOR_BLUE_VIOLET: Oklch = color!("oklch(53.38% 0.25 262.59)"); -// const COLOR_MEDIUM_SLATE_BLUE: Rgba = color!("MediumSlateBlue"); // oklch(60.45% 0.194 285.5) -const COLOR_MEDIUM_SLATE_BLUE: Oklch = color!("oklch(60.45% 0.194 262.26)"); +// pub const COLOR_MEDIUM_SLATE_BLUE: Rgba = color!("MediumSlateBlue"); // oklch(60.45% 0.194 285.5) +pub const COLOR_MEDIUM_SLATE_BLUE: Oklch = color!("oklch(60.45% 0.194 262.26)"); -// const COLOR_SLATE_BLUE: Rgba = color!("SlateBlue"); // oklch(54.36% 0.171 285.54) -const COLOR_SLATE_BLUE: Oklch = color!("oklch(54.36% 0.171 262.26)"); +// pub const COLOR_SLATE_BLUE_WITH_ALPHA: Rgba = color!("SlateBlue", 0.8); // oklch(54.36% 0.171 285.54) +pub const COLOR_SLATE_BLUE_WITH_ALPHA: Oklch = color!("oklch(54.36% 0.171 262.26)", 0.8); -// const COLOR_LIGHT_BLUE: Rgba = color!("LightBlue"); // oklch(85.62% 0.049 219.65) -const COLOR_LIGHT_BLUE: Oklch = color!("oklch(85.62% 0.049 262.26)"); +// pub const COLOR_SLATE_BLUE: Rgba = color!("SlateBlue"); // oklch(54.36% 0.171 285.54) +pub const COLOR_SLATE_BLUE: Oklch = color!("oklch(54.36% 0.171 262.26)"); -// const COLOR_WHITE: Rgba = color!("White"); // oklch(100% 3.5594404384177905e-8 106.37411429114086) -const COLOR_WHITE: Oklch = color!("oklch(100% 3.5594404384177905e-8 105.88)"); +// pub const COLOR_LIGHT_BLUE: Rgba = color!("LightBlue"); // oklch(85.62% 0.049 219.65) +pub const COLOR_LIGHT_BLUE: Oklch = color!("oklch(85.62% 0.049 262.26)"); -// const COLOR_DARK_SLATE_BLUE: Rgba = color!("DarkSlateBlue"); // oklch(41.43% 0.125 286.04) -const COLOR_DARK_SLATE_BLUE: Oklch = color!("oklch(41.43% 0.125 262.26)"); +// pub const COLOR_WHITE: Rgba = color!("White"); // oklch(100% 3.5594404384177905e-8 106.37411429114086) +pub const COLOR_WHITE: Oklch = color!("oklch(100% 3.5594404384177905e-8 105.88)"); -// const COLOR_LAVENDER: Rgba = color!("Lavender"); // oklch(93.09% 0.027 285.86) -const COLOR_LAVENDER: Oklch = color!("oklch(93.09% 0.027 262.26)"); +// pub const COLOR_DARK_SLATE_BLUE: Rgba = color!("DarkSlateBlue"); // oklch(41.43% 0.125 286.04) +pub const COLOR_DARK_SLATE_BLUE: Oklch = color!("oklch(41.43% 0.125 262.26)"); + +// pub const COLOR_LAVENDER: Rgba = color!("Lavender"); // oklch(93.09% 0.027 285.86) +pub const COLOR_LAVENDER: Oklch = color!("oklch(93.09% 0.027 262.26)"); diff --git a/frontend/src/waveform_panel.rs b/frontend/src/waveform_panel.rs index e2ce51f..8d0bf58 100644 --- a/frontend/src/waveform_panel.rs +++ b/frontend/src/waveform_panel.rs @@ -1,4 +1,4 @@ -use crate::{platform, script_bridge, Filename}; +use crate::{platform, script_bridge, Filename, theme::*}; use std::sync::Arc; use wellen::GetItem; use zoon::*; @@ -87,7 +87,7 @@ impl WaveformPanel { Button::new() .s(Padding::new().x(20).y(10)) .s(Background::new().color_signal( - hovered_signal.map_bool(|| color!("MediumSlateBlue"), || color!("SlateBlue")), + hovered_signal.map_bool(|| COLOR_MEDIUM_SLATE_BLUE, || COLOR_SLATE_BLUE), )) .s(Align::new().left()) .s(RoundedCorners::all(15)) @@ -123,7 +123,7 @@ impl WaveformPanel { .s(Padding::new().x(20).y(10)) .s(Background::new().color_signal( hovered_signal - .map_bool(|| color!("MediumSlateBlue"), || color!("SlateBlue")), + .map_bool(|| COLOR_MEDIUM_SLATE_BLUE, || COLOR_SLATE_BLUE), )) .s(Align::new().left()) .s(RoundedCorners::all(15)) @@ -178,7 +178,7 @@ impl WaveformPanel { Button::new() .s(Padding::new().x(20).y(10)) .s(Background::new().color_signal( - hovered_signal.map_bool(|| color!("MediumSlateBlue"), || color!("SlateBlue")), + hovered_signal.map_bool(|| COLOR_MEDIUM_SLATE_BLUE, || COLOR_SLATE_BLUE), )) .s(RoundedCorners::all(15)) .label("Save") @@ -349,7 +349,7 @@ impl WaveformPanel { .s(Height::exact(ROW_HEIGHT)) .s(Width::growable()) .s(Background::new().color_signal( - hovered_signal.map_bool(|| color!("SlateBlue"), || color!("SlateBlue", 0.8)), + hovered_signal.map_bool(|| COLOR_SLATE_BLUE, || COLOR_SLATE_BLUE_WITH_ALPHA), )) .s(RoundedCorners::new().left(15).right(5)) .label( @@ -384,7 +384,7 @@ impl WaveformPanel { .s(Height::exact(ROW_HEIGHT)) .s(Width::exact(70)) .s(Background::new().color_signal( - hovered_signal.map_bool(|| color!("SlateBlue"), || color!("SlateBlue", 0.8)), + hovered_signal.map_bool(|| COLOR_SLATE_BLUE, || COLOR_SLATE_BLUE_WITH_ALPHA), )) .s(RoundedCorners::new().left(5)) .label(