Intro

These visual specifications should serve as a guideline for Front-End Developers on how implement this control.

Connector Shape

All

BDC, DSP, and SAC

Six connector shape variants labeled A–C in two rows. Top row (solid line): A — straight connector, B — bent (S-curved) connector, C — loop connector with a "<Label>" placeholder. Bottom row (dashed line): the same three shapes rendered with a dashed stroke.

Value Description Details
A Straight General:
minimum selectable size (accessibility): 2rem x 2rem (32px x 32px)
tooltip: dependent on the use case
cursor: pointer
stroke-linecap: butt
stroke-linejoin: round
stroke-opacity: 1
stroke-dasharray: none; 0.25rem, 0.25rem
marker-start: none; arrow
marker-mid: dependent on the use case (none, icon, label, context toolbar, SAC only: tracepoint)
marker-end: none; arrow

Arrow Marker:
stroke-linecap: round
stroke-linejoin: butt
container width: 0.375rem (6px)
container height: 0.75rem (12px)
B Bent Same as for straight
C Loop Same as for straight

Connector Types

Default / Loop

BDC, DSP, and SAC

For the interaction states “Hover” and ”Selected on Hover,” the color token sapButton_Emphasized_Hover_Background is used on purpose to ensure accessibility in high contrast themes.
Information
Icon
false

Seven straight arrow connectors labeled A–G showing interaction states: A — default (grey), B — hover (blue), C — selected (blue), D — hover and selected (bold blue), E — selected hover (blue), F — disabled (light grey), G — hover and selected (bold blue).

Value Description Details
A Regular stroke: --sapFieldBorderColor
stroke-width: 0.0625rem (1px)

Mid-point:
icon-color: --sapFieldBorderColor
text-color: --sapField_PlaceholderTextColor
B Hover stroke: --sapButton_Emphasized_Hover_Background
stroke-width: 0.0625rem (1px)

Mid-point:
icon-color: --sapButton_Emphasized_Hover_Background
text-color: --sapButton_Emphasized_Hover_Background
C Selected stroke: --sapField_Active_BorderColor
stroke-width: 0.125rem (2px)

Mid-point:
icon-color: --sapButton_Selected_TextColor
text-color: --sapButton_Selected_TextColor
D Selected on Hover stroke: --sapButton_Emphasized_Hover_Background
stroke-width: 0.1875rem (3px)

Mid-point:
icon-color: --sapButton_Emphasized_Hover_Background
text-color: --sapButton_Emphasized_Hover_Background
E On Highlight Path stroke: --sapField_Active_BorderColor
stroke-width: 0.125rem (2px)

Mid-point:
icon-color: --sapButton_Selected_TextColor
text-color: --sapButton_Selected_TextColor
F Outside Highlight Path opacity: --sapContent_DisabledOpacity
G Focus stroke: --sapField_Focus_BorderColor
stroke-width: 0.1875rem (3px)

Mid-point:
icon-color: --sapContent_FocusColor
text-color: --sapContent_FocusColor

Impact and Lineage: Purple

DSP only

Seven straight arrow connectors labeled A–G showing interaction states in purple and blue: A — default (purple), B — hover (blue), C — selected (purple), D — hover and selected (bold blue), E — selected hover (purple), F — disabled (light purple), G — hover and selected (bold blue). Each connector has a mid-point icon marker.

Value Description Details
A Regular stroke: --sapChart_Sequence_8_Minus1
stroke-width: 0.0625rem (1px)

Mid-point:
icon-color: --sapChart_Sequence_8_Minus1
B Hover stroke: --sapButton_Emphasized_Hover_Background
stroke-width: 0.0625rem (1px)

Mid-point:
icon-color: --sapButton_Emphasized_Hover_Background
C Selected stroke: --sapChart_Sequence_8_Minus1
stroke-width: 0.125rem (2px)

Mid-point:
icon-color: --sapChart_Sequence_8_Minus1
D Selected on Hover stroke: --sapButton_Emphasized_Hover_Background
stroke-width: 0.1875rem (3px)

Mid-point:
icon-color: --sapButton_Emphasized_Hover_Background
E On Highlight Path stroke: --sapChart_Sequence_8_Minus1
stroke-width: 0.125rem (2px)

Mid-point:
icon-color: --sapChart_Sequence_8_Minus1
F Outside Highlight Path opacity: --sapContent_DisabledOpacity
G Focus stroke: --sapField_Focus_BorderColor
stroke-width: 0.1875rem (3px)

Mid-point:
icon-color: --sapContent_FocusColor

Task Chains: Error

DSP only

Seven straight arrow connectors labeled A–G showing interaction states in red and blue: A — default (red), B — hover (blue), C — selected (red), D — hover and selected (bold blue), E — selected hover (red), F — disabled (light red), G — hover and selected (bold blue).

Value Description Details
A Regular stroke: --sapErrorBorderColor
stroke-width: 0.0625rem (1px)

Mid-point:
icon-color: --sapNegativeElementColor
text-color: --sapNegativeElementColor
B Hover stroke: --sapButton_Emphasized_Hover_Background
stroke-width: 0.0625rem (1px)

Mid-point:
icon-color: --sapButton_Emphasized_Hover_Background
text-color: --sapButton_Emphasized_Hover_Background
C Selected stroke: --sapErrorBorderColor
stroke-width: 0.125rem (2px)

Mid-point:
icon-color: --sapNegativeElementColor
text-color: --sapNegativeElementColor
D Selected on Hover stroke: --sapButton_Emphasized_Hover_Background
stroke-width: 0.1875rem (3px)

Mid-point:
icon-color: --sapButton_Emphasized_Hover_Background
text-color: --sapButton_Emphasized_Hover_Background
E On Highlight Path stroke: --sapErrorBorderColor
stroke-width: 0.125rem (2px)

Mid-point:
icon-color: --sapNegativeElementColor
text-color: --sapNegativeElementColor
F Outside Highlight Path opacity: --sapContent_DisabledOpacity
G Focus stroke: --sapField_Focus_BorderColor
stroke-width: 0.1875rem (3px)

Mid-point:
icon-color: --sapContent_FocusColor

Task Chains: Warning

DSP only

Seven straight arrow connectors labeled A–G showing interaction states in orange and blue: A — default (orange), B — hover (blue), C — selected (orange), D — hover and selected (bold blue), E — selected hover (orange), F — disabled (light orange), G — hover and selected (bold blue).

Value Description Details
A Regular stroke: --sapWarningBorderColor
stroke-width: 0.0625rem (1px)

Mid-point:
icon-color: --sapCriticalElementColor
text-color: --sapCriticalElementColor
B Hover stroke: --sapButton_Emphasized_Hover_Background
stroke-width: 0.0625rem (1px)

Mid-point:
icon-color: --sapButton_Emphasized_Hover_Background
text-color: --sapButton_Emphasized_Hover_Background
C Selected stroke: --sapWarningBorderColor
stroke-width: 0.125rem (2px)

Mid-point:
icon-color: --sapCriticalElementColor
text-color: --sapCriticalElementColor
D Selected on Hover stroke: --sapButton_Emphasized_Hover_Background
stroke-width: 0.1875rem (3px)

Mid-point:
icon-color: --sapButton_Emphasized_Hover_Background
text-color: --sapButton_Emphasized_Hover_Background
E On Highlight Path stroke: --sapWarningBorderColor
stroke-width: 0.125rem (2px)

Mid-point:
icon-color: --sapCriticalElementColor
text-color: --sapCriticalElementColor
F Outside Highlight Path opacity: --sapContent_DisabledOpacity
G Focus stroke: --sapField_Focus_BorderColor
stroke-width: 0.1875rem (3px)

Mid-point:
icon-color: --sapContent_FocusColor

Task Chains: Success

DSP only

Seven straight arrow connectors labeled A–G showing interaction states in green and blue: A — default (green), B — hover (blue), C — selected (green), D — hover and selected (bold blue), E — selected hover (green), F — disabled (light green), G — hover and selected (bold blue).

Value Description Details
A Regular stroke: --sapSuccessBorderColor
stroke-width: 0.0625rem (1px)

Mid-point:
icon-color: --sapPositiveElementColor
text-color: --sapPositiveElementColor
B Hover stroke: --sapButton_Emphasized_Hover_Background
stroke-width: 0.0625rem (1px)

Mid-point:
icon-color: --sapButton_Emphasized_Hover_Background
text-color: --sapButton_Emphasized_Hover_Background
C Selected stroke: --sapSuccessBorderColor
stroke-width: 0.125rem (2px)

Mid-point:
icon-color: --sapPositiveElementColor
text-color: --sapPositiveElementColor
D Selected on Hover stroke: --sapButton_Emphasized_Hover_Background
stroke-width: 0.1875rem (3px)

Mid-point:
icon-color: --sapButton_Emphasized_Hover_Background
text-color: --sapButton_Emphasized_Hover_Background
E On Highlight Path stroke: --sapSuccessBorderColor
stroke-width: 0.125rem (2px)

Mid-point:
icon-color: --sapPositiveElementColor
text-color: --sapPositiveElementColor
F Outside Highlight Path opacity: --sapContent_DisabledOpacity
G Focus stroke: --sapField_Focus_BorderColor
stroke-width: 0.1875rem (3px)

Mid-point:
icon-color: --sapContent_FocusColor

Task Chains: Information

DSP only

Seven straight arrow connectors labeled A–G showing interaction states in blue: A — default (blue), B — hover (blue), C — selected (blue), D — hover and selected (bold blue), E — selected hover (blue), F — disabled (light blue), G — hover and selected (bold blue).

Value Description Details
A Regular stroke: --sapInformationBorderColor
stroke-width: 0.0625rem (1px)

Mid-point:
icon-color: --sapInformativeElementColor
text-color: --sapInformativeElementColor
B Hover stroke: --sapButton_Emphasized_Hover_Background
stroke-width: 0.0625rem (1px)

Mid-point:
icon-color: --sapButton_Emphasized_Hover_Background
text-color: --sapButton_Emphasized_Hover_Background
C Selected stroke: --sapInformationBorderColor
stroke-width: 0.125rem (2px)

Mid-point:
icon-color: --sapInformativeElementColor
text-color: --sapInformativeElementColor
D Selected on Hover stroke: --sapButton_Emphasized_Hover_Background
stroke-width: 0.1875rem (3px)

Mid-point:
icon-color: --sapButton_Emphasized_Hover_Background
text-color: --sapButton_Emphasized_Hover_Background
E On Highlight Path stroke: --sapInformationBorderColor
stroke-width: 0.125rem (2px)

Mid-point:
icon-color: --sapInformativeElementColor
text-color: --sapInformativeElementColor
F Outside Highlight Path opacity: --sapContent_DisabledOpacity
G Focus stroke: --sapField_Focus_BorderColor
stroke-width: 0.1875rem (3px)

Mid-point:
icon-color: --sapContent_FocusColor

Tracepoint

SAC only

Four connector variants showing tracepoint mid-point states. A — a grey filled circle that is only visible on hover. B — hover state with a solid dark grey tracepoint. C — half-enabled state with a light red tracepoint at reduced opacity. D — hover state with a solid red filled tracepoint. E — selected state with a larger blue outlined tracepoint.

Value Description Details
A General Selectable Container:
height: 1.5rem (24px)
width: 1.5rem (24px)
padding: 0.5 rem (8px)

Circle:
height: 0.5rem (8px)
width: 0.5rem (8px)
border-radius: 50%
visible: false; true on hover, etc.
B Hover background-colour: --sapFieldBorderColor
border-color: --sapFieldBorderColor
border-width: 0.0625rem (1px)
C Half-Enabled (Half-Selected) background-colour: --sapErrorBackground
border-color: --sapField_InvalidColor
border-width: 0.0625rem (1px)
D Enabled (Selected) background-colour: --sapField_InvalidColor
border-color: --sapField_InvalidColor
border-width: 0.0625rem (1px)
E Focus gap outside to the component border: 0.1875rm (3px)
border-color: --sapContent_FocusColor
border-width: --sapContent_FocusWidth