License	BSD3-style (see the file LICENSE)
Safe Haskell	None
Language	Haskell2010

Miso.Flow.Style

Contents

Everything
Structural contract only
Default theme only

Description

Stylesheets for miso-flow, split the way xyflow splits base.css and style.css:

flowBaseStyles — the structural contract the gesture system depends on (absolutely positioned pane / viewport / nodes, the transformed viewport, pointer-events routing, handle and resizer geometry). Every app needs these.
flowThemeStyles — the default look: color tokens (light, plus a dark palette behind a dark class on the container), node cards, cables, panels, controls, minimap, toolbars.

flowStyles is both together; flowCSS wraps it for a component's styles field. To ship your own look, use flowBaseCSS and provide your own rules instead of the theme — the views reference the --mf-* custom properties (see flowThemeStyles for the full list), so either define those tokens or restyle the classes directly.

Synopsis

flowStyles :: MisoString
flowCSS :: CSS
flowBaseStyles :: MisoString
flowBaseCSS :: CSS
flowThemeStyles :: MisoString
flowThemeCSS :: CSS

Everything

flowStyles :: MisoString Source #

The full stylesheet: flowBaseStyles plus flowThemeStyles.

flowCSS :: CSS Source #

Base + default theme, ready for a component's styles field.

Structural contract only

flowBaseStyles :: MisoString Source #

Layout and interaction rules the bridge requires; no colors, no decoration. Do not override positioning, transforms or pointer-events in these classes.

flowBaseCSS :: CSS Source #

Structural contract only, for apps shipping their own theme.

Default theme only

flowThemeStyles :: MisoString Source #

The default look. Driven by CSS custom properties on .miso-flow (restyle by overriding them): --mf-bg, --mf-dots, --mf-node-bg, --mf-node-color, --mf-node-border, --mf-node-shadow, --mf-node-shadow-selected, --mf-accent, --mf-accent-soft, --mf-edge, --mf-edge-selected, --mf-edge-label-bg, --mf-handle, --mf-handle-border, --mf-connection, --mf-connection-invalid, --mf-connection-valid, --mf-panel-bg, --mf-panel-border, --mf-panel-color, --mf-minimap-mask, --mf-minimap-node, --mf-selection, --mf-font. Add a dark class on the container for the dark palette.

flowThemeCSS :: CSS Source #

Default theme only.