SCION Workbench enables the creation of Angular web applications that require a flexible layout to arrange content side-by-side or stacked, all personalizable by the user via drag & drop.
Eclipse Public License 2.0
77
stars
10
forks
source link
Enable microfrontends to apply styles based on their embedding context #497
Is your feature request related to a problem? Please describe.
The SCION Workbench integrates microfrontends in different places, such as views and overlays. The microfrontends have a different background color depending on where they are embedded. For example, in dark mode, the background color of overlays is slightly brighter, or views in the peripheral area have a different background color than views in the main area.
Describe the solution you'd like
The workbench should provide information about the embedding context to enable microfrontends to apply styles based on their embedding context.
For example, the workbench could set the following CSS classes on the HTML root element of embedded microfrontends:
Workbench View: workbench-view or workbench-peripheral-view
Is your feature request related to a problem? Please describe.
The SCION Workbench integrates microfrontends in different places, such as views and overlays. The microfrontends have a different background color depending on where they are embedded. For example, in dark mode, the background color of overlays is slightly brighter, or views in the peripheral area have a different background color than views in the main area.
Describe the solution you'd like
The workbench should provide information about the embedding context to enable microfrontends to apply styles based on their embedding context.
For example, the workbench could set the following CSS classes on the HTML root element of embedded microfrontends:
workbench-vieworworkbench-peripheral-viewworkbench-dialogworkbench-popupAdditional context
See https://github.com/SchweizerischeBundesbahnen/scion-microfrontend-platform/issues/250 enabling an application to associate CSS class(es) with a router outlet.