@perspective-dev/viewer 4.5.1 → 4.5.2

package/src/css/_viewer_bundle.css

@@ -0,0 +1,41 @@
+/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+ * ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+ * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+ * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+ * ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+ * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+ * ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+ * ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+ * ┃ This file is part of the Perspective library, distributed under the terms ┃
+ * ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+ * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+ */
+
+@import "dom/checkbox.css";
+@import "dom/scrollbar.css";
+@import "dom/select.css";
+
+@import "containers/split-panel.css";
+@import "containers/scroll-panel.css";
+@import "containers/pairs-list.css";
+@import "containers/tabs.css";
+
+@import "type-icon.css";
+@import "aggregate-selector.css";
+@import "empty-column.css";
+@import "filter-item.css";
+@import "config-selector.css";
+@import "column-selector.css";
+@import "column-style.css";
+@import "column-symbol-attributes.css";
+@import "column-settings-panel.css";
+@import "expression-editor.css";
+@import "plugin-selector.css";
+@import "plugin-settings-panel.css";
+@import "render-warning.css";
+@import "status-bar.css";
+
+@import "form/code-editor.css";
+@import "form/debug.css";
+
+@import "viewer.css";

package/src/css/viewer.css

@@ -94,8 +94,8 @@
 }
 
 :host input[type="number"]::-webkit-inner-spin-button {
-    transform: scale(1.5); /* Makes the arrows 50% larger */
-    filter: invert(1);
+    transform: scale(1.5) translateX(-5px); /* Makes the arrows 50% larger */
+    filter: var(--psp-input--filter);
 }
 
 :host .sidebar_close_button {

package/src/rust/components/column_dropdown.rs

@@ -22,12 +22,11 @@ use yew::prelude::*;
 
 use super::column_selector::InPlaceColumn;
 use super::portal::PortalModal;
+use super::style::StyleSurface;
 use crate::session::Session;
 use crate::utils::*;
 use crate::*;
 
-static CSS: &str = include_str!(concat!(env!("OUT_DIR"), "/css/column-dropdown.css"));
-
 /// Shared state for the column dropdown, updated imperatively.
 #[derive(Default)]
 pub struct ColumnDropDownState {
@@ -207,6 +206,7 @@ impl Component for ColumnDropDownPortal {
             html! {
                 <PortalModal
                     tag_name="perspective-dropdown"
+                    surface={StyleSurface::ColumnDropdown}
                     {target}
                     own_focus=false
                     {on_close}
@@ -270,5 +270,5 @@ fn ColumnDropDownView(props: &ColumnDropDownViewProps) -> Html {
         props.width, props.width
     );
 
-    html! { <><style>{ CSS }</style><style>{ position }</style>{ body }</> }
+    html! { <><style>{ position }</style>{ body }</> }
 }

package/src/rust/components/column_selector/aggregate_selector.rs

@@ -18,8 +18,6 @@ use perspective_js::utils::ApiFuture;
 use yew::prelude::*;
 
 use crate::components::containers::select::*;
-use crate::components::style::LocalStyle;
-use crate::css;
 use crate::renderer::*;
 use crate::session::*;
 use crate::utils::PtrEqRc;
@@ -119,7 +117,6 @@ impl Component for AggregateSelector {
 
         html! {
             <>
-                <LocalStyle href={css!("aggregate-selector")} />
                 <div class="aggregate-selector-wrapper">
                     <Select<Aggregate>
                         wrapper_class="aggregate-selector"

package/src/rust/components/column_selector/config_selector.rs

@@ -25,8 +25,6 @@ use crate::components::column_dropdown::{ColumnDropDownElement, ColumnDropDownPo
 use crate::components::containers::dragdrop_list::*;
 use crate::components::containers::select::{Select, SelectItem};
 use crate::components::filter_dropdown::{FilterDropDownElement, FilterDropDownPortal};
-use crate::components::style::LocalStyle;
-use crate::css;
 use crate::presentation::Presentation;
 use crate::renderer::*;
 use crate::session::drag_drop_update::*;
@@ -609,7 +607,6 @@ impl Component for ConfigSelector {
         html! {
             <>
                 <div slot="top_panel" id="top_panel" {class} ondragend={dragend}>
-                    <LocalStyle href={css!("config-selector")} />
                     <div class="pivot_controls">
                         if group_rollups.len() > 1 {
                             <Select<GroupRollupMode>

package/src/rust/components/column_selector/empty_column.rs

@@ -17,8 +17,6 @@ use web_sys::*;
 use yew::prelude::*;
 
 use crate::components::column_dropdown::ColumnDropDownElement;
-use crate::components::style::LocalStyle;
-use crate::css;
 
 #[derive(Properties)]
 pub struct EmptyColumnProps {
@@ -70,7 +68,6 @@ impl Component for EmptyColumn {
 
         html! {
             <div class="pivot-column column-empty">
-                <LocalStyle href={css!("empty-column")} />
                 <input
                     spellcheck="false"
                     ref={self.input_ref.clone()}

package/src/rust/components/column_selector/filter_column.rs

@@ -23,9 +23,7 @@ use yew::prelude::*;
 use crate::components::containers::dragdrop_list::*;
 use crate::components::containers::select::*;
 use crate::components::filter_dropdown::FilterDropDownElement;
-use crate::components::style::LocalStyle;
 use crate::components::type_icon::TypeIcon;
-use crate::css;
 use crate::presentation::Presentation;
 use crate::renderer::*;
 use crate::session::*;
@@ -348,7 +346,6 @@ impl Component for FilterColumn {
                 ondragstart={dragstart}
                 ondragend={dragend}
             >
-                <LocalStyle href={css!("filter-item")} />
                 <div class="pivot-column-border">
                     <span class="drag-handle icon" />
                     // <TypeIcon ty={ColumnType::String} />

package/src/rust/components/column_selector/invalid_column.rs

@@ -12,14 +12,10 @@
 
 use yew::prelude::*;
 
-use crate::components::style::LocalStyle;
-use crate::css;
-
 #[function_component(InvalidColumn)]
 pub fn invalid_column() -> Html {
     html! {
         <div class="pivot-column column-empty column-invalid">
-            <LocalStyle href={css!("empty-column")} />
             <div class="column-invalid-input" />
         </div>
     }

package/src/rust/components/column_selector.rs

@@ -39,10 +39,8 @@ use self::config_selector::ConfigSelector;
 use self::inactive_column::*;
 use super::containers::scroll_panel::*;
 use super::containers::split_panel::{Orientation, SplitPanel};
-use super::style::LocalStyle;
 use crate::components::column_dropdown::{ColumnDropDownElement, ColumnDropDownPortal};
 use crate::components::containers::scroll_panel_item::ScrollPanelItem;
-use crate::css;
 use crate::presentation::{ColumnLocator, DragDropContainer, Presentation};
 use crate::queries::{ActiveColumnState, ActiveColumnStateData, ColumnsIteratorSet};
 use crate::renderer::*;
@@ -519,7 +517,6 @@ impl Component for ColumnSelector {
 
         html! {
             <>
-                <LocalStyle href={css!("column-selector")} />
                 <SplitPanel
                     no_wrap=true
                     on_reset={self.on_reset.callback()}

package/src/rust/components/column_settings_sidebar/style_tab/symbol/symbol_pairs.rs

@@ -17,9 +17,7 @@ use yew::{Callback, Html, Properties, html};
 
 use crate::components::column_settings_sidebar::style_tab::symbol::symbol_pairs_item::PairsListItem;
 use crate::components::filter_dropdown::FilterDropDownElement;
-use crate::components::style::LocalStyle;
 use crate::config::SymbolKVPair;
-use crate::css;
 use crate::utils::PtrEqRc;
 
 #[derive(Properties, PartialEq)]
@@ -84,7 +82,6 @@ impl yew::Component for PairsList {
 
         html! {
             <>
-                <LocalStyle href={css!("containers/pairs-list")} />
                 <div class="pairs-list" id={props.id.clone()} data-label={props.title.clone()}>
                     <ul>{ for main_pairs }</ul>
                 </div>

package/src/rust/components/column_settings_sidebar/style_tab/symbol.rs

@@ -24,9 +24,7 @@ use yew::{Callback, Html, Properties, html};
 
 use crate::components::column_settings_sidebar::style_tab::symbol::symbol_pairs::PairsList;
 use crate::components::filter_dropdown::{FilterDropDownElement, FilterDropDownPortal};
-use crate::components::style::LocalStyle;
 use crate::config::{ColumnConfigFieldUpdate, KeyValueOpts, SymbolKVPair};
-use crate::css;
 use crate::session::Session;
 
 #[derive(Properties, PartialEq, Clone)]
@@ -126,7 +124,6 @@ impl yew::Component for SymbolStyle {
         let update_pairs = ctx.link().callback(SymbolAttrMsg::UpdatePairs);
         html! {
             <>
-                <LocalStyle href={css!("column-symbol-attributes")} />
                 <PairsList
                     title="Symbols"
                     id="attributes-symbols"

package/src/rust/components/column_settings_sidebar.rs

@@ -31,14 +31,12 @@ use crate::components::containers::sidebar::Sidebar;
 use crate::components::containers::tab_list::TabList;
 use crate::components::editable_header::EditableHeaderProps;
 use crate::components::expression_editor::ExpressionEditorProps;
-use crate::components::style::LocalStyle;
 use crate::components::type_icon::TypeIconType;
 use crate::presentation::{ColumnLocator, ColumnSettingsTab, Presentation};
 use crate::renderer::Renderer;
 use crate::session::{Session, SessionMetadataRc};
 use crate::tasks::{delete_expr, save_expr, update_expr};
 use crate::utils::PtrEqRc;
-use crate::*;
 
 #[derive(Clone, Derivative, Properties)]
 #[derivative(Debug)]
@@ -356,7 +354,6 @@ impl Component for ColumnSettingsPanel {
 
         html! {
             <>
-                <LocalStyle href={css!("column-settings-panel")} />
                 <Sidebar
                     on_close={ctx.props().on_close.clone()}
                     id_prefix="column_settings"

package/src/rust/components/containers/dropdown_menu.rs

@@ -17,8 +17,6 @@ use web_sys::*;
 use yew::prelude::*;
 
 use super::select::SelectItem;
-use crate::components::style::LocalStyle;
-use crate::*;
 
 #[derive(Properties, PartialEq)]
 pub struct DropDownMenuProps<T>
@@ -95,7 +93,7 @@ where
             html! { <span class="no-results">{ "No Completions" }</span> }
         };
 
-        html! { <><LocalStyle href={css!("containers/dropdown-menu")} />{ body }</> }
+        html! { <>{ body }</> }
     }
 }
 

package/src/rust/components/containers/scroll_panel.rs

@@ -22,8 +22,6 @@ use yew::prelude::*;
 use yew::virtual_dom::VChild;
 
 use super::scroll_panel_item::ScrollPanelItem;
-use crate::components::style::LocalStyle;
-use crate::css;
 use crate::utils::*;
 
 #[derive(Properties)]
@@ -253,7 +251,7 @@ impl Component for ScrollPanel {
             }
         };
 
-        html! { <><LocalStyle href={css!("containers/scroll-panel")} />{ items }</> }
+        html! { <>{ items }</> }
     }
 
     fn rendered(&mut self, ctx: &Context<Self>, _first_render: bool) {

package/src/rust/components/containers/split_panel.rs

@@ -19,9 +19,6 @@ use web_sys::HtmlElement;
 use yew::html::Scope;
 use yew::prelude::*;
 
-use crate::components::style::LocalStyle;
-use crate::css;
-
 #[derive(Properties, Default)]
 pub struct SplitPanelProps {
     pub children: Children,
@@ -201,7 +198,6 @@ impl Component for SplitPanel {
         let count = iter.len();
         let contents = html! {
             <>
-                <LocalStyle href={css!("containers/split-panel")} />
                 for (i, x) in iter {
                     if i == 0 {
                         if count == 1 {

package/src/rust/components/containers/tab_list.rs

@@ -12,8 +12,6 @@
 
 use yew::{Callback, Children, Component, Html, Properties, classes, html};
 
-use crate::components::style::LocalStyle;
-use crate::css;
 use crate::presentation::ColumnTab;
 
 #[derive(Properties, Debug, PartialEq)]
@@ -87,7 +85,6 @@ impl<T: ColumnTab> Component for TabList<T> {
 
         html! {
             <>
-                <LocalStyle href={css!("containers/tabs")} />
                 <div id="settings_tab_bar">{ for gutter_tabs }</div>
                 <div id="format-tab" class="tab-content scrollable">
                     { ctx.props().children.iter().nth(self.selected_idx) }

package/src/rust/components/datetime_column_style.rs

@@ -23,12 +23,10 @@ use wasm_bindgen::prelude::*;
 use yew::prelude::*;
 
 use super::modal::{ModalLink, SetModalLink};
-use super::style::LocalStyle;
 use crate::components::datetime_column_style::custom::DatetimeStyleCustom;
 use crate::components::datetime_column_style::simple::DatetimeStyleSimple;
 use crate::components::form::select_value_field::SelectValueField;
 use crate::config::*;
-use crate::css;
 use crate::utils::WeakScope;
 
 /// Format-only widget for `datetime` columns. Renders the `date_format`
@@ -126,7 +124,6 @@ impl Component for DatetimeColumnStyle {
     fn view(&self, ctx: &Context<Self>) -> Html {
         html! {
             <>
-                <LocalStyle href={css!("column-style")} />
                 <div id="column-style-container" class="datetime-column-style-container">
                     if ctx.props().enable_time_config {
                         <SelectValueField<String>

package/src/rust/components/empty_row.rs

@@ -20,8 +20,6 @@ use web_sys::*;
 use yew::prelude::*;
 
 use crate::components::filter_dropdown::FilterDropDownElement;
-use crate::components::style::LocalStyle;
-use crate::css;
 
 #[derive(Properties, Derivative)]
 #[derivative(Debug)]
@@ -87,7 +85,6 @@ impl Component for EmptyRow {
 
         html! {
             <div class="pivot-column column-empty">
-                <LocalStyle href={css!("empty-column")} />
                 <input
                     spellcheck="false"
                     ref={self.input_ref.clone()}

package/src/rust/components/expression_editor.rs

@@ -16,10 +16,8 @@ use perspective_client::{ExprValidationError, clone};
 use yew::prelude::*;
 
 use super::form::code_editor::*;
-use super::style::LocalStyle;
 use crate::session::{Session, SessionMetadata, SessionMetadataRc};
 use crate::tasks::{ExprValidation, validate_expression};
-use crate::*;
 
 #[derive(Properties, PartialEq, Clone)]
 pub struct ExpressionEditorProps {
@@ -54,10 +52,12 @@ pub struct ExpressionEditor {
     expr: Rc<String>,
     error: Option<ExprValidationError>,
     oninput: Callback<Rc<String>>,
+
     /// Monotonically increasing request id used to drop stale
     /// validation results when the user types faster than the engine
     /// can validate.
     validation_req_id: u64,
+
     /// The id of the most recently dispatched validation; the result
     /// is only applied when its echoed id matches.
     last_dispatched_req_id: u64,
@@ -131,7 +131,6 @@ impl Component for ExpressionEditor {
         clone!(ctx.props().disabled);
         html! {
             <>
-                <LocalStyle href={css!("expression-editor")} />
                 <label class="item_title">{ "Expression" }</label>
                 <div id="editor-container" class={disabled_class}>
                     <CodeEditor

package/src/rust/components/filter_dropdown.rs

@@ -20,12 +20,11 @@ use yew::html::ImplicitClone;
 use yew::prelude::*;
 
 use super::portal::PortalModal;
+use super::style::StyleSurface;
 use crate::session::Session;
 use crate::utils::*;
 use crate::*;
 
-static CSS: &str = include_str!(concat!(env!("OUT_DIR"), "/css/filter-dropdown.css"));
-
 #[derive(Default)]
 struct FilterDropDownState {
     values: Vec<String>,
@@ -220,6 +219,7 @@ impl Component for FilterDropDownPortal {
             html! {
                 <PortalModal
                     tag_name="perspective-dropdown"
+                    surface={StyleSurface::FilterDropdown}
                     {target}
                     own_focus=false
                     {on_close}
@@ -267,7 +267,7 @@ fn FilterDropDownView(props: &FilterDropDownViewProps) -> Html {
         }
     };
 
-    html! { <><style>{ CSS }</style>{ body }</> }
+    html! { <>{ body }</> }
 }
 
 fn filter_values(

package/src/rust/components/font_loader.rs

@@ -154,12 +154,12 @@ impl FontLoaderProps {
                 }
             }
 
-            let fut = async { select_all(block_fonts.into_iter()).await.0 };
+            let fut = async { select_all(block_fonts).await.0 };
             block_promises.push(ApiFuture::new(fut))
         }
 
         if block_promises.len() != preload_fonts.len() {
-            web_sys::console::warn_1(&format!("Missing preload fonts {:?}", &preload_fonts).into());
+            web_sys::console::warn_1(&format!("Missing preload fonts {:?}", preload_fonts).into());
         }
 
         let res = join_all(block_promises)

package/src/rust/components/form/code_editor.rs

@@ -19,8 +19,6 @@ use yew::prelude::*;
 
 use crate::components::form::highlight::highlight;
 use crate::components::function_dropdown::{FunctionDropDownElement, FunctionDropDownPortal};
-use crate::components::style::LocalStyle;
-use crate::css;
 use crate::exprtk::{Cursor, tokenize};
 use crate::utils::*;
 
@@ -174,7 +172,6 @@ pub fn code_editor(props: &CodeEditorProps) -> Html {
     clone!(props.disabled);
     html! {
         <>
-            <LocalStyle href={css!("form/code-editor")} />
             <div id="editor" {class}>
                 <div id="line_numbers" ref={lineno_ref}>{ line_numbers }</div>
                 <div id="editor-inner" {class}>

package/src/rust/components/form/debug.rs

@@ -18,8 +18,6 @@ use wasm_bindgen::prelude::*;
 use yew::prelude::*;
 
 use crate::components::form::code_editor::CodeEditor;
-use crate::components::style::LocalStyle;
-use crate::css;
 use crate::js::{MimeType, copy_to_clipboard, paste_from_clipboard};
 use crate::presentation::*;
 use crate::renderer::*;
@@ -166,8 +164,6 @@ pub fn debug_panel(props: &DebugPanelProps) -> Html {
 
     html! {
         <>
-            <LocalStyle href={css!("containers/tabs")} />
-            <LocalStyle href={css!("form/debug")} />
             <div id="debug-panel-overflow">
                 <div id="debug-panel" class="sidebar_column" ref={sizer}>
                     <div id="debug-panel-controls">

package/src/rust/components/function_dropdown.rs

@@ -20,10 +20,9 @@ use yew::html::ImplicitClone;
 use yew::prelude::*;
 
 use super::portal::PortalModal;
+use super::style::StyleSurface;
 use crate::utils::*;
 
-static CSS: &str = include_str!(concat!(env!("OUT_DIR"), "/css/function-dropdown.css"));
-
 #[derive(Default)]
 struct FunctionDropDownState {
     values: Vec<CompletionItemSuggestion>,
@@ -158,6 +157,7 @@ impl Component for FunctionDropDownPortal {
             html! {
                 <PortalModal
                     tag_name="perspective-dropdown"
+                    surface={StyleSurface::FunctionDropdown}
                     {target}
                     own_focus=false
                     {on_close}
@@ -211,7 +211,7 @@ fn FunctionDropDownView(props: &FunctionDropDownViewProps) -> Html {
         }
     };
 
-    html! { <><style>{ CSS }</style>{ body }</> }
+    html! { <>{ body }</> }
 }
 
 fn filter_values(input: &str) -> Vec<CompletionItemSuggestion> {

package/src/rust/components/number_series_style.rs

@@ -14,10 +14,8 @@ use web_sys::{HtmlInputElement, InputEvent};
 use yew::prelude::*;
 
 use super::modal::{ModalLink, SetModalLink};
-use super::style::LocalStyle;
 use crate::components::form::select_enum_field::SelectEnumField;
 use crate::config::*;
-use crate::css;
 use crate::utils::WeakScope;
 
 #[derive(Properties)]
@@ -125,7 +123,6 @@ impl Component for NumberSeriesStyle {
 
         html! {
             <>
-                <LocalStyle href={css!("column-style")} />
                 <div id="column-style-container" class="number-series-style-container">
                     <SelectEnumField<ChartType>
                         label="chart-type"

package/src/rust/components/plugin_selector.rs

@@ -12,8 +12,6 @@
 
 use yew::prelude::*;
 
-use super::style::LocalStyle;
-use crate::css;
 use crate::utils::PtrEqRc;
 
 /// Pure value props — no engine handles, no PubSub subscriptions.
@@ -85,7 +83,6 @@ impl Component for PluginSelector {
 
         html! {
             <>
-                <LocalStyle href={css!("plugin-selector")} />
                 <div id="plugin_selector_container" {class}>
                     <PluginSelect name={plugin_name} on_click={callback} />
                     <div id="plugin_selector_border" />

package/src/rust/components/plugin_tab.rs

@@ -22,9 +22,7 @@ use yew::prelude::*;
 use crate::components::column_settings_sidebar::style_tab::primitive_field::{
     BoolField, ColorField, ColorRangeField, EnumField, NumberFieldPrimitive,
 };
-use crate::components::style::LocalStyle;
 use crate::config::ControlSpec;
-use crate::css;
 use crate::queries::get_plugin_config_schema;
 use crate::renderer::Renderer;
 use crate::session::Session;
@@ -212,9 +210,6 @@ pub fn PluginTab(props: &PluginTabProps) -> Html {
 
     html! {
         <div id="plugin-tab" class="sidebar_column scrollable">
-            <LocalStyle href={css!("column-style")} />
-            <LocalStyle href={css!("plugin-settings-panel")} />
-            <LocalStyle href={css!("containers/tabs")} />
             <div id="plugin-config-container" class="tab-section">{ components }</div>
         </div>
     }

package/src/rust/components/portal.rs

@@ -20,7 +20,7 @@ use web_sys::*;
 use yew::prelude::*;
 
 use crate::components::modal::ModalOrientation;
-use crate::components::style::StyleProvider;
+use crate::components::style::{StyleProvider, StyleSurface};
 use crate::utils::*;
 
 #[derive(Properties, PartialEq)]
@@ -41,6 +41,9 @@ pub struct PortalModalProps {
     pub tag_name: &'static str,
 
     pub theme: String,
+
+    /// Which popup CSS surface this portal's ShadowRoot adopts.
+    pub surface: StyleSurface,
 }
 
 pub enum PortalModalMsg {
@@ -209,7 +212,7 @@ impl Component for PortalModal {
             <>
                 <style>{ css }</style>
                 <ContextProvider<ModalOrientation> context={self.rev_vert.clone()}>
-                    <StyleProvider root={self.host.clone()}>
+                    <StyleProvider root={self.host.clone()} surface={ctx.props().surface}>
                         { for ctx.props().children.iter() }
                     </StyleProvider>
                 </ContextProvider<ModalOrientation>>

package/src/rust/components/render_warning.rs

@@ -12,8 +12,6 @@
 
 use yew::prelude::*;
 
-use super::style::LocalStyle;
-use crate::css;
 use crate::renderer::limits::RenderLimits;
 
 #[derive(Properties, PartialEq)]
@@ -81,7 +79,6 @@ pub fn render_warning(props: &RenderWarningProps) -> Html {
         let onclick = Callback::from(move |_: MouseEvent| on_dismiss.emit(()));
         html! {
             <>
-                <LocalStyle href={css!("render-warning")} />
                 <div
                     class="plugin_information plugin_information--warning"
                     id="plugin_information--size"

package/src/rust/components/status_bar.rs

@@ -15,12 +15,12 @@ use web_sys::*;
 use yew::prelude::*;
 
 use super::status_indicator::StatusIndicator;
-use super::style::LocalStyle;
 use crate::components::containers::select::*;
 use crate::components::copy_dropdown::CopyDropDownMenu;
 use crate::components::export_dropdown::ExportDropDownMenu;
 use crate::components::portal::PortalModal;
 use crate::components::status_bar_counter::StatusBarRowsCounter;
+use crate::components::style::StyleSurface;
 use crate::config::*;
 use crate::js::*;
 use crate::presentation::{Presentation, PresentationProps};
@@ -332,7 +332,6 @@ impl Component for StatusBar {
         if is_settings {
             html! {
                 <>
-                    <LocalStyle href={css!("status-bar")} />
                     <div
                         ref={&self.statusbar_ref}
                         id={ctx.props().id.clone()}
@@ -418,6 +417,7 @@ impl Component for StatusBar {
                     </div>
                     <PortalModal
                         tag_name="perspective-copy-menu"
+                        surface={StyleSurface::DropdownMenu}
                         target={self.copy_target.clone()}
                         own_focus=true
                         on_close={on_close_copy}
@@ -427,6 +427,7 @@ impl Component for StatusBar {
                     </PortalModal>
                     <PortalModal
                         tag_name="perspective-export-menu"
+                        surface={StyleSurface::DropdownMenu}
                         target={self.export_target.clone()}
                         own_focus=true
                         on_close={on_close_export}