CSS design tokens

FlowDrop uses CSS custom properties with a --fd-* prefix as its theming API. Override these tokens to customize the editor’s appearance.

Preview themes in Storybook

See components rendered with these tokens — toggle light/dark and inspect the result live — in the FlowDrop Storybook.

How theming works

FlowDrop’s token system has three tiers:

Tier	Purpose	You customize?
Internal Palette (`--_*`)	Raw color values	No
Semantic Tokens (`--fd-*`)	Public theming API	Yes
Component styles	Consume semantic tokens	No

Override --fd-* tokens and all components update automatically.

/* Example: Apply a purple theme */
:root {
  --fd-primary: #8b5cf6;
  --fd-primary-hover: #7c3aed;
  --fd-primary-muted: #f5f3ff;
  --fd-accent: #8b5cf6;
  --fd-ring: #8b5cf6;
}

Surfaces

Token	Description
`--fd-background`	Main background color
`--fd-foreground`	Main text color
`--fd-muted`	Muted background (cards, inputs)
`--fd-muted-foreground`	Muted text color
`--fd-card`	Card background
`--fd-card-foreground`	Card text color

Borders

Token	Description
`--fd-border`	Default border color
`--fd-border-muted`	Subtle border
`--fd-border-strong`	Emphasized border
`--fd-ring`	Focus ring color

Primary & accent

Token	Description
`--fd-primary`	Primary action color (buttons, links)
`--fd-primary-hover`	Primary hover state
`--fd-primary-foreground`	Text on primary background
`--fd-primary-muted`	Light primary background
`--fd-accent`	Accent color
`--fd-accent-hover`	Accent hover state

Status colors

Each status color has four variants:

Base Token	`-hover`	`-foreground`	`-muted`
`--fd-success`	`--fd-success-hover`	`--fd-success-foreground`	`--fd-success-muted`
`--fd-warning`	`--fd-warning-hover`	`--fd-warning-foreground`	`--fd-warning-muted`
`--fd-error`	`--fd-error-hover`	`--fd-error-foreground`	`--fd-error-muted`
`--fd-info`	`--fd-info-hover`	`--fd-info-foreground`	`--fd-info-muted`

Spacing

Token	Default
`--fd-space-3xs`	4px
`--fd-space-2xs`	6px
`--fd-space-xs`	8px
`--fd-space-sm`	10px
`--fd-space-md`	12px
`--fd-space-lg`	14px
`--fd-space-xl`	16px
`--fd-space-2xl`	20px
`--fd-space-3xl`	24px

Border radius

Token	Default
`--fd-radius-sm`	4px
`--fd-radius-md`	6px
`--fd-radius-lg`	8px
`--fd-radius-xl`	12px
`--fd-radius-full`	9999px (pill shape)

Typography

Token	Default
`--fd-text-xs`	12px
`--fd-text-sm`	14px
`--fd-text-base`	16px
`--fd-text-lg`	18px
`--fd-text-xl`	20px

Layout

Token	Default	Description
`--fd-sidebar-width`	320px	Node sidebar width
`--fd-navbar-height`	60px	Top navbar height
`--fd-toolbar-height`	40px	Canvas toolbar height

Node dimensions

Node dimensions use a 10px grid to align with the editor’s snap grid:

Token	Default	Description
`--fd-node-default-width`	290px	Standard node width
`--fd-node-header-height`	60px	Node header area
`--fd-node-terminal-size`	80px	Terminal node size (start/end)
`--fd-node-square-size`	80px	Square node size (gateway)
`--fd-handle-size`	20px	Port handle hit area
`--fd-handle-visual-size`	12px	Port handle visible size

Accent HSL knobs

For fine-grained accent control, FlowDrop exposes HSL components:

Token	Default	Description
`--fd-accent-hue`	17	Accent hue (0–360)
`--fd-accent-saturation`	100%	Accent saturation
`--fd-accent-lightness`	34%	Accent lightness
`--fd-accent-low`	(derived)	Low-intensity accent
`--fd-accent-high`	(derived)	High-intensity accent
`--fd-gray-hue`	210	Base hue for grays

Quick accent experiments:

:root {
  --fd-accent-hue: 174; /* Teal */
  --fd-accent-hue: 260; /* Purple */
  --fd-accent-hue: 340; /* Pink */
  --fd-accent-hue: 220; /* Blue */
  --fd-accent-hue: 150; /* Green */
}

Dark mode

FlowDrop auto-switches tokens based on data-theme:

<html data-theme="dark"></html>

Or programmatically:

import { setTheme, toggleTheme } from '@flowdrop/flowdrop/settings';

setTheme('dark');
toggleTheme();

All semantic tokens have dark-mode equivalents that activate automatically. The accent HSL knobs adjust luminance in dark mode — --fd-accent-low becomes darker and --fd-accent-high becomes lighter.

Next steps

Theming Guide — practical theming patterns
Store API: settingsStore — programmatic theme control

Reference

Troubleshooting

CSS design tokens

Preview themes in Storybook

How theming works

Surfaces

Borders

Primary & accent

Status colors

Spacing

Border radius

Typography

Layout

Node dimensions

Accent HSL knobs

Dark mode

Next steps

Preview themes in Storybook

​How theming works

​Surfaces

​Borders

​Primary & accent

​Status colors

​Spacing

​Border radius

​Typography

​Layout

​Node dimensions

​Accent HSL knobs

​Dark mode

​Next steps

How theming works

Surfaces

Borders

Primary & accent

Status colors

Spacing

Border radius

Typography

Layout

Node dimensions

Accent HSL knobs

Dark mode

Next steps