diff --git a/gui/src/rust/ensogl/lib/theme/src/lib.rs b/gui/src/rust/ensogl/lib/theme/src/lib.rs index 28c3b49c665..93008b69855 100644 --- a/gui/src/rust/ensogl/lib/theme/src/lib.rs +++ b/gui/src/rust/ensogl/lib/theme/src/lib.rs @@ -113,6 +113,11 @@ define_theme! { dark background { color = color::Lcha::new(0.2,0.013,0.18,1.0) } + shadow { + color = color::Lcha::new(0.0,0.0,0.0,0.20); + fading_color = color::Lcha::new(0.0,0.0,0.0,0.0); + exponent = 2.0 + } selection { color = color::Lcha::new(0.72,0.5,0.22,1.0); size = 7.0 @@ -128,6 +133,15 @@ define_theme! { dark background { color = color::Lcha::new(0.2,0.013,0.18,1.0) } + shadow { + color = color::Lcha::new(0.0,0.0,0.0,0.20); + fading_color = color::Lcha::new(0.0,0.0,0.0,0.0); + exponent = 2.0; + html { + alpha = 0.16; + size = 16.0 + } + } text { color = color::Lcha::new(1.0,0.0,0.0,0.7); selection { @@ -189,6 +203,11 @@ define_theme! { dark background { color = color::Lcha::new(0.2,0.013,0.18,1.0) } + shadow { + color = color::Lcha::new(0.0,0.0,0.0,0.20); + fading_color = color::Lcha::new(0.0,0.0,0.0,0.0); + exponent = 2.0 + } highlight { color = color::Lcha::new(0.72,0.5,0.22,1.0) } @@ -203,11 +222,6 @@ define_theme! { dark } } } - shadow { - color = color::Lcha::new(0.0,0.0,0.0,0.20); - fading_color = color::Lcha::new(0.0,0.0,0.0,0.0); - exponent = 2.0 - } } define_default_theme! { light @@ -252,7 +266,11 @@ define_default_theme! { light shadow { color = color::Lcha::new(0.0,0.0,0.0,0.20); fading_color = color::Lcha::new(0.0,0.0,0.0,0.0); - exponent = 2.0 + exponent = 2.0; + html { + alpha = 0.16; + size = 16.0 + } } text { color = color::Lcha::new(0.0,0.0,0.0,0.7); @@ -313,7 +331,7 @@ define_default_theme! { light widget { list_view { background { - color = color::Lcha::new(0.94,0.013,0.18,1.0) + color = color::Lcha::new(0.98,0.013,0.18,1.0) } shadow { color = color::Lcha::new(0.0,0.0,0.0,0.20); @@ -321,7 +339,7 @@ define_default_theme! { light exponent = 2.0 } highlight { - color = color::Lcha::new(0.55,0.65,0.79,1.0) + color = color::Lcha::new(0.83,0.58,0.436,1.0) } text { color = color::Lcha::new(0.0,0.0,0.0,0.7); diff --git a/gui/src/rust/ide/view/graph-editor/src/component/visualization/container.rs b/gui/src/rust/ide/view/graph-editor/src/component/visualization/container.rs index 38ae7a4e6b3..479fdad80bd 100644 --- a/gui/src/rust/ide/view/graph-editor/src/component/visualization/container.rs +++ b/gui/src/rust/ide/view/graph-editor/src/component/visualization/container.rs @@ -226,19 +226,29 @@ impl View { scene.views.main.remove(&shape_system.shape_system.symbol); scene.views.viz.add(&shape_system.shape_system.symbol); + // FIXME : StyleWatch is unsuitable here, as it was designed as an internal tool for shape system (#795) + let styles = StyleWatch::new(&scene.style_sheet); + let bg_color = styles.get_color(ensogl_theme::vars::graph_editor::visualization::background::color); + let bg_color = color::Rgba::from(bg_color); + let bg_hex = format!("rgba({},{},{},{})",bg_color.red*255.0,bg_color.green*255.0,bg_color.blue*255.0,bg_color.alpha); + + let shadow_alpha = styles.get_number_or(ensogl_theme::vars::graph_editor::visualization::shadow::html::alpha,0.16); + let shadow_size = styles.get_number_or(ensogl_theme::vars::graph_editor::visualization::shadow::html::size,16.0); + let shadow = format!("0 0 {}px rgba(0, 0, 0, {})",shadow_size,shadow_alpha); + let div = web::create_div(); let background_dom = DomSymbol::new(&div); // TODO : We added a HTML background to the `View`, because "shape" background was overlapping // the JS visualization. This should be further investigated while fixing rust // visualization displaying. (#796) - background_dom.dom().set_style_or_warn("width" ,"0" ,&logger); - background_dom.dom().set_style_or_warn("height" ,"0" ,&logger); - background_dom.dom().set_style_or_warn("z-index" ,"1" ,&logger); - background_dom.dom().set_style_or_warn("overflow-y" ,"auto" ,&logger); - background_dom.dom().set_style_or_warn("overflow-x" ,"auto" ,&logger); - background_dom.dom().set_style_or_warn("background" ,"#FDF9F6FA" ,&logger); - background_dom.dom().set_style_or_warn("border-radius" ,"14px" ,&logger); - background_dom.dom().set_style_or_warn("box-shadow" ,"0 0 16px rgba(0,0,0,0.14)",&logger); + background_dom.dom().set_style_or_warn("width" ,"0" ,&logger); + background_dom.dom().set_style_or_warn("height" ,"0" ,&logger); + background_dom.dom().set_style_or_warn("z-index" ,"1" ,&logger); + background_dom.dom().set_style_or_warn("overflow-y" ,"auto",&logger); + background_dom.dom().set_style_or_warn("overflow-x" ,"auto",&logger); + background_dom.dom().set_style_or_warn("background" ,bg_hex,&logger); + background_dom.dom().set_style_or_warn("border-radius","14px",&logger); + background_dom.dom().set_style_or_warn("box-shadow" ,shadow,&logger); display_object.add_child(&background_dom); scene.dom.layers.back.manage(&background_dom); @@ -282,18 +292,24 @@ impl FullscreenView { scene.views.main.remove(&shape_system.shape_system.symbol); scene.views.viz_fullscreen.add(&shape_system.shape_system.symbol); + // FIXME : StyleWatch is unsuitable here, as it was designed as an internal tool for shape system (#795) + let styles = StyleWatch::new(&scene.style_sheet); + let bg_color = styles.get_color(ensogl_theme::vars::graph_editor::visualization::background::color); + let bg_color = color::Rgba::from(bg_color); + let bg_hex = format!("rgba({},{},{},{})",bg_color.red*255.0,bg_color.green*255.0,bg_color.blue*255.0,bg_color.alpha); + let div = web::create_div(); let background_dom = DomSymbol::new(&div); // TODO : We added a HTML background to the `View`, because "shape" background was overlapping // the JS visualization. This should be further investigated while fixing rust // visualization displaying. (#796) - background_dom.dom().set_style_or_warn("width" ,"0" ,&logger); - background_dom.dom().set_style_or_warn("height" ,"0" ,&logger); - background_dom.dom().set_style_or_warn("z-index" ,"1" ,&logger); - background_dom.dom().set_style_or_warn("overflow-y" ,"auto" ,&logger); - background_dom.dom().set_style_or_warn("overflow-x" ,"auto" ,&logger); - background_dom.dom().set_style_or_warn("background" ,"#FDF9F6FA" ,&logger); - background_dom.dom().set_style_or_warn("border-radius" ,"0" ,&logger); + background_dom.dom().set_style_or_warn("width" ,"0" ,&logger); + background_dom.dom().set_style_or_warn("height" ,"0" ,&logger); + background_dom.dom().set_style_or_warn("z-index" ,"1" ,&logger); + background_dom.dom().set_style_or_warn("overflow-y" ,"auto",&logger); + background_dom.dom().set_style_or_warn("overflow-x" ,"auto",&logger); + background_dom.dom().set_style_or_warn("background" ,bg_hex,&logger); + background_dom.dom().set_style_or_warn("border-radius","0" ,&logger); display_object.add_child(&background_dom); scene.dom.layers.back.manage(&background_dom); diff --git a/gui/src/rust/ide/view/src/documentation.rs b/gui/src/rust/ide/view/src/documentation.rs index 21c904f31db..61c3e1ab858 100644 --- a/gui/src/rust/ide/view/src/documentation.rs +++ b/gui/src/rust/ide/view/src/documentation.rs @@ -7,9 +7,11 @@ use crate::graph_editor::component::visualization; use ast::prelude::FallibleResult; use enso_frp as frp; +use ensogl::data::color; use ensogl::display; use ensogl::display::DomSymbol; use ensogl::display::scene::Scene; +use ensogl::display::shape::primitive::StyleWatch; use ensogl::system::web; use ensogl::system::web::StyleSetter; use ensogl::system::web::AttributeSetter; @@ -78,15 +80,25 @@ impl ViewModel { let size = Rc::new(Cell::new(Vector2(VIEW_WIDTH,VIEW_HEIGHT))); let overlay = component::ShapeView::::new(&logger,scene); - dom.dom().set_attribute_or_warn("class","scrollable",&logger); - dom.dom().set_style_or_warn("white-space" ,"normal" ,&logger); - dom.dom().set_style_or_warn("overflow-y" ,"auto" ,&logger); - dom.dom().set_style_or_warn("overflow-x" ,"auto" ,&logger); - dom.dom().set_style_or_warn("background-color","#FAF8F4" ,&logger); - dom.dom().set_style_or_warn("padding" ,format!("{}px",PADDING) ,&logger); - dom.dom().set_style_or_warn("pointer-events" ,"auto" ,&logger); - dom.dom().set_style_or_warn("border-radius" ,format!("{}px",CORNER_RADIUS) ,&logger); - dom.dom().set_style_or_warn("box-shadow" ,"0 0 16px rgba(0, 0, 0, 0.06)",&logger); + // FIXME : StyleWatch is unsuitable here, as it was designed as an internal tool for shape system (#795) + let styles = StyleWatch::new(&scene.style_sheet); + let bg_color = styles.get_color(ensogl_theme::vars::graph_editor::visualization::background::color); + let bg_color = color::Rgba::from(bg_color); + let bg_hex = format!("rgba({},{},{},{})",bg_color.red*255.0,bg_color.green*255.0,bg_color.blue*255.0,bg_color.alpha); + + let shadow_alpha = styles.get_number_or(ensogl_theme::vars::graph_editor::visualization::shadow::html::alpha,0.16); + let shadow_size = styles.get_number_or(ensogl_theme::vars::graph_editor::visualization::shadow::html::size,16.0); + let shadow = format!("0 0 {}px rgba(0, 0, 0, {})",shadow_size,shadow_alpha); + + dom.dom().set_attribute_or_warn("class" ,"scrollable" ,&logger); + dom.dom().set_style_or_warn("white-space" ,"normal" ,&logger); + dom.dom().set_style_or_warn("overflow-y" ,"auto" ,&logger); + dom.dom().set_style_or_warn("overflow-x" ,"auto" ,&logger); + dom.dom().set_style_or_warn("background-color",bg_hex ,&logger); + dom.dom().set_style_or_warn("padding" ,format!("{}px",PADDING) ,&logger); + dom.dom().set_style_or_warn("pointer-events" ,"auto" ,&logger); + dom.dom().set_style_or_warn("border-radius" ,format!("{}px",CORNER_RADIUS),&logger); + dom.dom().set_style_or_warn("box-shadow" ,shadow ,&logger); overlay.shape.roundness.set(1.0); overlay.shape.radius.set(CORNER_RADIUS);