Foblex Flow
Styling Tokens and Overrides
Foblex Flow styling is token-driven.
The shipped SCSS creates three token layers, but for application-level customization you should usually touch only the final one: --ff-* alias tokens.
Token layers
Primitive tokens
Defined in primitive-tokens().
These are the raw design values: grayscale, accent palette, radii, fonts, and shadows.
Examples:
--ff-gray-800--ff-blue-500--ff-radius-4--ff-shadow-2
Semantic tokens
Defined in semantic-tokens().
These map primitives to UI intent: surfaces, borders, text, selection, minimap, magnetic helpers, and state colors.
Examples:
--ff-color-surface-card--ff-color-border-accent--ff-color-connection-hover--ff-color-minimap-view
Alias tokens
Defined in ff-aliases().
These are the variables actually consumed by styling mixins and runtime classes.
Examples:
--ff-node-background-color--ff-group-background-color--ff-grouping-drop-target-border-color-active--ff-connector-size--ff-connection-selected-color--ff-selection-area-color
For app code, these alias tokens are the recommended override layer.
Recommended customization strategy
1. Keep the shipped structure
Use the mixins as-is and change only --ff-* values:
This keeps all shipped selectors and interaction states, but changes the visual identity.
2. Scope tokens to one editor
CSS variables cascade, so you can theme a single editor instance:
This is the preferred way to support multiple branded editors on the same page.
3. Extend dark mode
The shipped theme already defines defaults for .dark and [data-theme='dark'].
Override the same alias layer there:
Alias token families
These families cover the main public customization surface:
--ff-flow-*--ff-canvas-*--ff-node-*--ff-group-*--ff-grouping-drop-target-*--ff-handle-*--ff-connector-*--ff-outlet-*--ff-connection-*--ff-marker-*--ff-waypoint-*--ff-background-*--ff-selection-area-*--ff-minimap-*--ff-magnetic-*--ff-external-item-*
If you stay within these families, you can usually upgrade the library without forking its internal styling files.
When to customize semantic or primitive layers instead
Touch the lower layers only when you are building a broader design system around Foblex Flow, for example:
- you want several alias families to inherit from a new shared semantic palette;
- you maintain a library-level theme package;
- you intentionally want to fork the shipped design tokens.
For normal application work, overriding aliases is simpler, safer, and easier to reason about.