Class DesignTokens

Namespace

FlowGraph.Avalonia.Rendering

Assembly

FlowGraph.Avalonia.dll

Design tokens for consistent styling across all FlowGraph components. Inspired by React Flow's CSS variables and design system.

Usage:

• Reference these constants throughout renderers for consistency
• All values are in logical pixels (unscaled)
• Scale factor is applied by the renderer context when needed

public static class DesignTokens

Inheritance

object

DesignTokens

Inherited Members

object.Equals(object)

object.Equals(object, object)

object.GetHashCode()

object.GetType()

object.MemberwiseClone()

object.ReferenceEquals(object, object)

object.ToString()

Fields

BorderBase

Standard border for most elements. Used for: node borders, port borders, selection

public const double BorderBase = 2

Field Value

double

BorderThick

Thick border for emphasis. Used for: selected nodes, active states

public const double BorderThick = 3

Field Value

double

BorderThin

Thin border for subtle separators. Used for: header separators, input borders

public const double BorderThin = 1

Field Value

double

ColorSwatchLg

Color swatch large size.

public const double ColorSwatchLg = 60

Field Value

double

ColorSwatchSm

Color swatch small size.

public const double ColorSwatchSm = 24

Field Value

double

ComboBoxWidth

Standard combo box width.

public const double ComboBoxWidth = 120

Field Value

double

FontSizeBase

Base/default font size for body text. Used for: node labels, form inputs, edge labels

public const double FontSizeBase = 12

Field Value

double

FontSizeLg

Large font size for icons and headings. Used for: styled node icons

public const double FontSizeLg = 18

Field Value

double

FontSizeMd

Medium font size for emphasis. Used for: node titles, output displays

public const double FontSizeMd = 14

Field Value

double

FontSizeSm

Small font size for supporting text. Used for: value displays, input hints, group labels

public const double FontSizeSm = 11

Field Value

double

FontSizeXl

Extra large font size for prominent elements. Used for: preview placeholders

public const double FontSizeXl = 24

Field Value

double

FontSizeXs

Extra small font size for compact UI elements. Used for: simplified nodes, secondary labels

public const double FontSizeXs = 10

Field Value

double

InputWidthDefault

Standard input field width.

public const double InputWidthDefault = 140

Field Value

double

InputWidthNarrow

Narrow input field width.

public const double InputWidthNarrow = 100

Field Value

double

InputWidthWide

Wide input field width.

public const double InputWidthWide = 160

Field Value

double

NodeHeightCompact

Compact node height.

public const double NodeHeightCompact = 50

Field Value

double

NodeHeightDefault

Default node height.

public const double NodeHeightDefault = 80

Field Value

double

NodeHeightExpanded

Expanded node height for radio buttons, multi-line content.

public const double NodeHeightExpanded = 120

Field Value

double

NodeHeightLarge

Large node height for output displays.

public const double NodeHeightLarge = 200

Field Value

double

NodeHeightTall

Tall node height for more content.

public const double NodeHeightTall = 100

Field Value

double

NodeMinHeight

Minimum node height for resize.

public const double NodeMinHeight = 30

Field Value

double

NodeMinWidth

Minimum node width for resize.

public const double NodeMinWidth = 60

Field Value

double

NodeWidthDefault

Default node width.

public const double NodeWidthDefault = 150

Field Value

double

NodeWidthLarge

Large node width for output displays.

public const double NodeWidthLarge = 220

Field Value

double

NodeWidthNarrow

Narrow node width for simple inputs.

public const double NodeWidthNarrow = 120

Field Value

double

NodeWidthWide

Wide node width for complex content.

public const double NodeWidthWide = 180

Field Value

double

RadiusBase

Base radius for standard components. Used for: input fields, color swatches

public const double RadiusBase = 4

Field Value

double

RadiusLg

Large radius for prominent containers. Used for: headered nodes, groups, preview areas

public const double RadiusLg = 8

Field Value

double

RadiusMd

Medium radius for nodes and cards. Used for: default nodes, toolbar

public const double RadiusMd = 6

Field Value

double

RadiusSm

Small radius for tight corners. Used for: buttons, chips, tags

public const double RadiusSm = 3

Field Value

double

ShadowBlur

Standard shadow blur radius.

public const double ShadowBlur = 8

Field Value

double

ShadowOffsetX

Standard shadow offset X.

public const double ShadowOffsetX = 0

Field Value

double

ShadowOffsetY

Standard shadow offset Y.

public const double ShadowOffsetY = 2

Field Value

double

ShadowSpread

Standard shadow spread (negative for tighter shadow).

public const double ShadowSpread = -2

Field Value

double

SliderWidth

Standard slider width.

public const double SliderWidth = 140

Field Value

double

SpacingBase

Base spacing for padding and gaps.

public const double SpacingBase = 6

Field Value

double

SpacingLg

Large spacing for section separation.

public const double SpacingLg = 12

Field Value

double

SpacingMd

Medium spacing.

public const double SpacingMd = 8

Field Value

double

SpacingSm

Small spacing.

public const double SpacingSm = 4

Field Value

double

SpacingXs

Extra small spacing.

public const double SpacingXs = 2

Field Value

double