Intro

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

General

Node Container

DSP only

Three nodes with callouts pointing to: A) the node container; B) the header area; and C) the content area.

Value Description Details
A Node Container background-color: --sapNeutralBackground
border-color: --sapButton_Track_BorderColor
border-width: --sapButton_BorderWidth
border-radius: --sapGroup_BorderCornerRadius
B Header Header:
left-right-padding: sapContent_Space_Small
top-padding: sapContent_Space_Tiny
spacing: sapContent_Space_Small

Icon:
icon-size: 1rem (16px)
icon-color: --sapTile_IconColor
tooltip: Space, Space Locked

Heading:
text-style: --sapFontBoldFamily
text-color: --sapTile_TitleTextColor
font-size: --sapFontSize

Icon Only Button (Compact)
icons: sap-icon://overflow
tooltip: Show Options
C Content padding: sapContent_Space_Small

Start and End Point

DSP only

Two node points with annotation badges: A) a grey filled circle indicating a start point; B) a grey filled circle surrounded by a grey outlined circle indicating an end point.

Value Description Details
A Start Point Text:
text-style: --sapFontBoldFamily
text-color: --sapNeutralTextColor
font-size: --sapFontSize

Circle:
top-padding: 0.5rem (8px)
color: --sapTile_IconColor
size: 0.75rem (12px)
B End Point Outer circle:
Border color: --sapNeutralColor
Border size: 0.125rem (2px) Inside
Size: 1.5rem (24px)

Inner circle:
Color: --sapNeutralColor
Size: 0.75rem (12px)

Node Structure

General

BDC, DSP, and SAC

Annotated spec for the general node structure, with callouts pointing to: A) a default node container; B) the left icon panel with a pink highlight indicating the padding; C) the header section with pink highlights indicating the padding; and D) an example of a columns table.

Value Description Details
A Node (Container) cursor: pointer
box-sizing: border-box
min-width: 5rem (80px)
width: 14rem (224px); default, adjustable
min-height: 2.5rem (40px)
height: 5.375rem (86px);default, adjustable
B Icon Panel Icon Panel:
width: 2.5rem (40px)
padding-top: 0.5rem (8px)
vertical-alignment: top-centered

Icon:
icon-size: 1rem (16px)
tooltip: dependent on the object
C Header Header:
alignment: Top-left
padding: 0.5rem 0.5rem 0.5rem 0.75rem (8px 8px 8px 12px)
spacing: 0.125rem (2px)

Heading:
font-style: --sapButton_Emphasized_FontFamily
font-size: --sapFontSize
text-color: --sapTitleColor

Subheading (optional):
font-style: --sapFontFamily
font-size: --sapFontSize
font-weight: normal
text-color: --sapContent_LabelColor
D Columns Table (Optional) Table (Compact)
OR Toolbar (Compact) with Standard List (Compact)
Table content dependent on the product

Icons (optional):
padding: 0.25rem (4px)
icon-color:
--sapContent_NonInteractiveIconColor
--sapErrorColor
--sapWarningColor
--sapSuccessColor
--sapInformationColor
icon-size: 1rem (16px)
tooltip: dependent on the object

General

BDC and DSP

Three node with callouts E–G: E shows possible badge states (default, hover, selected), F shows the node in expanded and collapsed states with chevron controls, and G shows the footer row with highlights for padding between icons.

Value Description Details
E Badge Button (Optional) Icon Only Button (Compact)
Alignment: top-right
right-padding: 0.25rem (4px)

Badge (Compact)
tooltip: Show Validation Messages; adjustable
F Expand / Collapse Button (Optional) Icon Only Button (Compact)
Alignment: top-right
right-padding: 0.25rem (4px)

icons:
sap-icon://navigation-right-arrow
sap-icon://navigation-down-arrow

tooltip:
Expand Node; adjustable
Collapse Node; adjustable
G Status Bar (Optional) padding: 0.125rem 0.25rem (2px 4px)

Left container:
alignment: left
spacing: 0.25rem (4px)

Icon & Text (Optional):
padding: 0.5rem (8px)
spacing: 0.375rem (6px)
icon-color: --sapContent_NonInteractiveIconColor
icon-size: 1rem (16px)
font-style: --sapFontFamily
font-size: --sapFontSize
font-weight: normal
text-color: --sapContent_LabelColor
tooltip: dependent on the object

Icon & Text Button (Compact, Optional)
tooltip: dependent on the object

Right Container:
alignment: right
spacing: 0.25rem (4px)

Icons (optional):
padding: 0.5rem (8px)
icon-color:
--sapContent_NonInteractiveIconColor
--sapErrorColor
--sapWarningColor
--sapSuccessColor
--sapInformationColor
icon-size: 1rem (16px)
tooltip: dependent on the object

Graphical View

DSP only

Two operator node variants (H): the expanded view shows a teal-accented node with heading "All", subheading "Operator", a footer badge, and a dropdown chevron; the collapsed view shows a compact teal node with a right-facing chevron.

Value Description Details
H Header Full Expand / Collapse (Legacy) visible: false

Data Actions / Multi Actions

SAC only

A single data action node labeled "Allocation" with a deactivated tag, a red error badge, and pink highlights indicating padding between elements.

Value Description Details
I Status Icon Icon:
alignment: center-right
padding-right: 0.25rem (4px)
icon-color:
--sapErrorColor
--sapWarningColor
--sapSuccessColor
--sapInformationColor
icon-size: 1rem (16px)
tooltip: dependent on the product

Inverted ObjectStatus / Tag (Compact, Optional)

Modeler

SAC only

An expanded node labeled "Data Foundation" with a teal header, a grid icon, and a body listing a "Measures (7)" section with five numeric measure rows: Discount, Gross_Margin, Original_Sales_Price, Price, and Product Count. A pink connection point and annotation badge A are on the top edge.

Value Description Details
A Header (Legacy) Header:
alignment: center-left
padding: 0.5rem 0.5rem 0.5rem 0.75rem (8px 8px 8px 12px)spacing: 0.5rem (8px)

Icon:
icon-size: 1rem (16px)
tooltip: dependent on the object

Heading:
font-style: --sapButton_Emphasized_FontFamily
font-size: --sapFontSize
text-color: --sapTitleColor

Node Types

White

BDC, DSP, and SAC

Eight interaction states of the White node type. A) Default with no accent color and a white body. B) Hover with a greyed body. C) Selected with a dark grey icon panel and light blue fill. D) Selected and hovered with a darker on hover fill. E) Hover while dragging state with a light blue fill and solid blue border. F) Focus state with a bold blue border. G) On highlight path state with a blue bottom border on a regular state node. H) Outside highlight path state appears the same as the on highlight path state but at a reduced opacity.

Value Description Details
A Regular Node (Container):
background-color: --sapButton_Background
border-color: --sapButton_Track_BorderColor
border-width: --sapButton_BorderWidth
border-radius: --sapButton_BorderCornerRadius

Icon Panel:
background-color: --sapTile_Background
right border-color: --sapButton_Track_BorderColor
right border-width: --sapButton_BorderWidth
icon-color: --sapTile_IconColor
B Hover Node (Container):
background-color: --sapButton_Hover_Background
border-color: same as regular
border-width: same as regular
border-radius: same as regular

Icon Panel:
background-color: same as regular
right border-color: same as regular
right border-width: same as regular
icon-color: same as regular
C Selected Node (Container):
background-color: --sapButton_Selected_Background
border-color: --sapButton_Track_Selected_BorderColor
border-width: 0.125rem 0.125rem 0.25rem 0.125rem (2px 2px 4px 2px)
border-radius: same as regular

Icon Panel:
background-color: --sapChart_Sequence_Neutral_Minus1
right border-color: same as regular
right border-width: same as regular
icon-color: --sapChart_Sequence_Neutral_Minus1_TextColor
D Selected and Hover Node (Container):
background-color: --sapButton_Selected_Hover_Background
border-color: --sapButton_Track_Selected_Hover_BorderColor
border-width: same as selected
border-radius: same as regular

Icon Panel:
background-color: same as selected
right border-color: same as regular
right border-width: same as regular
icon-color: same as selected
E Hover While Dragging Another Element See section “All”
F Focus outline-offset: 0.125rem (2px)
border-color: --sapContent_FocusColor
border-width: --sapContent_FocusWidth
border style: --sapContent_FocusStyle
G DSP Impact and Lineage: On Highlight Path Node (Container):
background-color: same as regular
border-color: --sapButton_Track_Selected_BorderColor
border-width: 0.0625rem 0.0625rem 0.25rem 0.0625rem (1px 1px 4px 1px)
border-radius: same as regular

Icon Panel:
background-color: same as regular
right border-color: same as regular
right border-width: same as regular
icon-color: same as regular
H DSP Impact and Lineage: Outside Highlight Path opacity: sapContent_DisabledOpacity

Grey

BDC, DSP, and SAC

Eight interaction states of the Grey node type. A) Default with a grey left accent and white body. B) Hover with a greyed body. C) Selected with a dark grey header and light blue fill. D) Selected and hovered with a darker on hover fill. E) Hover while dragging state with a light blue fill and solid blue border. F) Focus state with a bold blue border. G) On highlight path state with a blue bottom border on a regular state node. H) Outside highlight path state appears the same as the on highlight path state but at a reduced opacity.

Value Description Details
A Regular Node (Container):
background-color: --sapButton_Background
border-color: --sapButton_Track_BorderColor
border-width: --sapButton_BorderWidth
border-radius: --sapButton_BorderCornerRadius

Icon Panel:
background-color: --sapChart_Sequence_Neutral_Plus2
right border-color: --sapButton_Track_BorderColor
right border-width: --sapButton_BorderWidth
icon-color: --sapChart_Sequence_Neutral_Plus2_TextColor
B Hover Node (Container):
background-color: --sapButton_Hover_Background
border-color: same as regular
border-width: same as regular
border-radius: same as regular

Icon Panel:
background-color: same as regular
right border-color: same as regular
right border-width: same as regular
icon-color: same as regular
C Selected Node (Container):
background-color: --sapButton_Selected_Background
border-color: --sapButton_Track_Selected_BorderColor
border-width: 0.125rem 0.125rem 0.25rem 0.125rem (2px 2px 4px 2px)
border-radius: same as regular

Icon Panel:
background-color: --sapChart_Sequence_Neutral_Minus4
right border-color: same as regular
right border-width: same as regular
icon-color: --sapChart_Sequence_Neutral_Minus4_TextColor
D Selected and Hover Node (Container):
background-color: --sapButton_Selected_Hover_Background
border-color: --sapButton_Track_Selected_Hover_BorderColor
border-width: same as selected
border-radius: same as regular

Icon Panel:
background-color: same as selected
right border-color: same as regular
right border-width: same as regular
icon-color: same as selected
E Hover While Dragging Another Element See section “All”
F Focus outline-offset: 0.125rem (2px)
border-color: --sapContent_FocusColor
border-width: --sapContent_FocusWidth
border style: --sapContent_FocusStyle
G DSP Impact and Lineage: On Highlight Path Node (Container):
background-color: same as regular
border-color: --sapButton_Track_Selected_BorderColor
border-width: 0.0625rem 0.0625rem 0.25rem 0.0625rem (1px 1px 4px 1px)
border-radius: same as regular

Icon Panel:
background-color: same as regular
right border-color: same as regular
right border-width: same as regular
icon-color: same as regular
H DSP Impact and Lineage: Outside Highlight Path opacity: sapContent_DisabledOpacity

Blue

BDC, DSP, and SAC

Eight interaction states of the Blue node type. A) Default with a blue left accent and white body. B) Hover with a greyed body. C) Selected with a dark blue icon panel and light blue fill. D) Selected and hovered with a darker blue on hover fill. E) Hover while dragging state with a light blue fill and solid blue border. F) Focus state with a bold blue border. G) On highlight path state with a blue bottom border on a regular state node. H) Outside highlight path state appears the same as the on highlight path state but at a reduced opacity.

Value Description Details
A Regular Node (Container):
background-color: --sapButton_Background
border-color: --sapButton_Track_BorderColor
border-width: --sapButton_BorderWidth
border-radius: --sapButton_BorderCornerRadius

Icon Panel:
background-color: --sapChart_Sequence_1_Plus3
right border-color: --sapButton_Track_BorderColor
right border-width: --sapButton_BorderWidth
icon-color: --sapChart_Sequence_1_Minus5
B Hover Node (Container):
background-color: --sapButton_Hover_Background
border-color: same as regular
border-width: same as regular
border-radius: same as regular

Icon Panel:
background-color: same as regular
right border-color: same as regular
right border-width: same as regular
icon-color: same as regular
C Selected Node (Container):
background-color: --sapButton_Selected_Background
border-color: --sapButton_Track_Selected_BorderColor
border-width: 0.125rem 0.125rem 0.25rem 0.125rem (2px 2px 4px 2px)
border-radius: same as regular

Icon Panel:
background-color: --sapChart_Sequence_1_Minus2
right border-color: same as regular
right border-width: same as regular
icon-color: --sapChart_Sequence_1_Minus2_TextColor
D Selected and Hover Node (Container):
background-color: --sapButton_Selected_Hover_Background
border-color: --sapButton_Track_Selected_Hover_BorderColor
border-width: same as selected
border-radius: same as regular

Icon Panel:
background-color: same as selected
right border-color: same as regular
right border-width: same as regular
icon-color: same as selected
E Hover While Dragging Another Element See section “All”
F Focus outline-offset: 0.125rem (2px)
border-color: --sapContent_FocusColor
border-width: --sapContent_FocusWidth
border style: --sapContent_FocusStyle
G DSP Impact and Lineage: On Highlight Path Node (Container):
background-color: same as regular
border-color: --sapButton_Track_Selected_BorderColor
border-width: 0.0625rem 0.0625rem 0.25rem 0.0625rem (1px 1px 4px 1px)
border-radius: same as regular

Icon Panel:
background-color: same as regular
right border-color: same as regular
right border-width: same as regular
icon-color: same as regular
H DSP Impact and Lineage: Outside Highlight Path opacity: sapContent_DisabledOpacity

Operator

BDC and DSP

Eight interaction states of the Operator node type. A) Default with a teal left accent and white body. B) Hover with a greyed body. C) Selected with a dark teal icon panel and light blue fill. D) Selected and hovered with a dark teal icon panel. E) Hover while dragging state with a light blue fill and solid blue border. F) Focus state with a bold blue border. G) On highlight path state with a blue bottom border on a regular state node. H) Outside highlight path state appears the same as the on highlight path state but at a reduced opacity.

Value Description Details
A Regular Node (Container):
background-color: --sapButton_Background
border-color: --sapButton_Track_BorderColor
border-width: --sapButton_BorderWidth
border-radius: --sapButton_BorderCornerRadius

Icon Panel:
background-color: --sapChart_Sequence_6_Plus3
right border-color: --sapButton_Track_BorderColor
right border-width: --sapButton_BorderWidth
icon-color: --sapChart_Sequence_6_Minus4
B Hover Node (Container):
background-color: --sapButton_Hover_Background
border-color: same as regular
border-width: same as regular
border-radius: same as regular

Icon Panel:
background-color: same as regular
right border-color: same as regular
right border-width: same as regular
icon-color: same as regular
C Selected Node (Container):
background-color: --sapButton_Selected_Background
border-color: --sapButton_Track_Selected_BorderColor
border-width: 0.125rem 0.125rem 0.25rem 0.125rem (2px 2px 4px 2px)
border-radius: same as regular

Icon Panel:
background-color: --sapChart_Sequence_6_Minus2
right border-color: same as regular
right border-width: same as regular
icon-color: --sapChart_Sequence_6_Minus2_TextColor
D Selected and Hover Node (Container):
background-color: --sapButton_Selected_Hover_Background
border-color: --sapButton_Track_Selected_Hover_BorderColor
border-width: same as selected
border-radius: same as regular

Icon Panel:
background-color: same as selected
right border-color: same as regular
right border-width: same as regular
icon-color: same as selected
E Hover While Dragging Another Element See section “All”
F Focus outline-offset: 0.125rem (2px)
border-color: --sapContent_FocusColor
border-width: --sapContent_FocusWidth
border style: --sapContent_FocusStyle
G DSP Impact and Lineage: On Highlight Path Node (Container):
background-color: same as regular
border-color: --sapButton_Track_Selected_BorderColor
border-width: 0.0625rem 0.0625rem 0.25rem 0.0625rem (1px 1px 4px 1px)
border-radius: same as regular

Icon Panel:
background-color: same as regular
right border-color: same as regular
right border-width: same as regular
icon-color: same as regular
H DSP Impact and Lineage: Outside Highlight Path opacity: sapContent_DisabledOpacity

Spotlight

DSP only

FILE: Spotlight.png Eight interaction states of the Spotlight node type. A) Default with a magenta left accent and white body. B) Hover with a greyed body. C) Selected with a dark magenta header and light blue fill. D) Selected and hovered with a darker On highlight fill. E) Hover while dragging state with a light blue fill and solid blue border. F) Focus state with a bold blue border. G) On highlight path state with a blue bottom border on a regular state node. H) Outside highlight path state appears the same as the on highlight path state but at a reduced opacity.

Value Description Details
A Regular Node (Container):
background-color: --sapButton_Background
border-color: --sapButton_Track_BorderColor
border-width: --sapButton_BorderWidth
border-radius: --sapButton_BorderCornerRadius

Icon Panel:
background-color: --sapChart_Sequence_8_Plus3
right border-color: --sapButton_Track_BorderColor
right border-width: --sapButton_BorderWidth
icon-color: --sapChart_Sequence_8_Plus3_TextColor
B Hover Node (Container):
background-color: --sapButton_Hover_Background
border-color: same as regular
border-width: same as regular
border-radius: same as regular

Icon Panel:
background-color: same as regular
right border-color: same as regular
right border-width: same as regular
icon-color: same as regular
C Selected Node (Container):
background-color: --sapButton_Selected_Background
border-color: --sapButton_Track_Selected_BorderColor
border-width: 0.125rem 0.125rem 0.25rem 0.125rem (2px 2px 4px 2px)
border-radius: same as regular

Icon Panel:
background-color: --sapChart_Sequence_8_Minus1
right border-color: same as regular
right border-width: same as regular
icon-color: --sapChart_Sequence_8_Minus1_TextColor
D Selected and Hover Node (Container):
background-color: --sapButton_Selected_Hover_Background
border-color: --sapButton_Track_Selected_Hover_BorderColor
border-width: same as selected
border-radius: same as regular

Icon Panel:
background-color: same as selected
right border-color: same as regular
right border-width: same as regular
icon-color: same as selected
E Hover While Dragging Another Element See section “All”
F Focus outline-offset: 0.125rem (2px)
border-color: --sapContent_FocusColor
border-width: --sapContent_FocusWidth
border style: --sapContent_FocusStyle
G DSP Impact and Lineage: On Highlight Path Node (Container):
background-color: same as regular
border-color: --sapButton_Track_Selected_BorderColor
border-width: 0.0625rem 0.0625rem 0.25rem 0.0625rem (1px 1px 4px 1px)
border-radius: same as regular

Icon Panel:
background-color: same as regular
right border-color: same as regular
right border-width: same as regular
icon-color: same as regular
H DSP Impact and Lineage: Outside Highlight Path opacity: sapContent_DisabledOpacity

Error

DSP and SAC

Eight interaction states of the Error semantic node. A) Default with a red border, light red icon panel, and red error badge. B) Hover with a greyed body, light red icon panel, and red error badge. C) Selected state with a dark red icon panel, light blue fill, and red error badge. D) Selected and hover state with a darker blue fill, dark red icon panel, and red error badge. E) Hover while dragging state with a light blue fill and solid blue border. F) Focus with a dark blue outline around a regular state node. G) On highlight path state with a blue bottom border on a regular state node. H) Outside highlight path state appears the same as the on highlight path state but at a reduced opacity.

Value Description Details
A Regular Node (Container):
background-color: --sapButton_Background
border-color: --sapButton_Track_BorderColor
border-width: --sapButton_BorderWidth
border-radius: --sapButton_BorderCornerRadius

Icon Panel:
background-color: --sapErrorBackground
right border-color: --sapButton_Track_BorderColor
right border-width: --sapButton_BorderWidth
icon-color: --sapNegative_TextColor
B Hover Node (Container):
background-color: --sapButton_Hover_Background
border-color: same as regular
border-width: same as regular
border-radius: same as regular

Icon Panel:
background-color: same as regular
right border-color: same as regular
right border-width: same as regular
icon-color: same as regular
C Selected Node (Container):
background-color: --sapButton_Selected_Background
border-color: --sapButton_Track_Selected_BorderColor
border-width: 0.125rem 0.125rem 0.25rem 0.125rem (2px 2px 4px 2px)
border-radius: same as regular

Icon Panel:
background-color: --sapNegativeColor
right border-color: same as regular
right border-width: same as regular
icon-color: --sapContent_ContrastIconColor
D Selected and Hover Node (Container):
background-color: --sapButton_Selected_Hover_Background
border-color: --sapButton_Track_Selected_Hover_BorderColor
border-width: same as selected
border-radius: same as regular

Icon Panel:
background-color: same as selected
right border-color: same as regular
right border-width: same as regular
icon-color: same as selected
E Hover While Dragging Another Element See section “All”
F Focus outline-offset: 0.125rem (2px)
border-color: --sapContent_FocusColor
border-width: --sapContent_FocusWidth
border style: --sapContent_FocusStyle
G DSP Impact and Lineage: On Highlight Path Node (Container):
background-color: same as regular
border-color: --sapButton_Track_Selected_BorderColor
border-width: 0.0625rem 0.0625rem 0.25rem 0.0625rem (1px 1px 4px 1px)
border-radius: same as regular

Icon Panel:
background-color: same as regular
right border-color: same as regular
right border-width: same as regular
icon-color: same as regular
H DSP Impact and Lineage: Outside Highlight Path opacity: sapContent_DisabledOpacity

Warning

DSP and SAC

Eight interaction states of the Warning semantic node. A) Default with an orange border, light orange icon panel, and orange warning triangle badge. B) Hover with a greyed body, light orange icon panel, and orange warning triangle badge. C) Selected state with a dark orange icon panel, light blue fill, and orange warning triangle badge. D) Selected and hover state with a darker blue fill, dark orange icon panel, and orange warning triangle badge. E) Hover while dragging state with a darker blue fill and solid blue border. F) Focus with a dark blue outline around a regular state node. G) On highlight path state with a blue bottom border on a regular state node. H) Outside highlight path state appears the same as the on highlight path state but at a reduced opacity.

Value Description Details
A Regular Node (Container):
background-color: --sapButton_Background
border-color: --sapButton_Track_BorderColor
border-width: --sapButton_BorderWidth
border-radius: --sapButton_BorderCornerRadius

Icon Panel:
background-color: --sapWarningBackground
right border-color: --sapButton_Track_BorderColor
right border-width: --sapButton_BorderWidth
icon-color: --sapCritical_TextColor
B Hover Node (Container):
background-color: --sapButton_Hover_Background
border-color: same as regular
border-width: same as regular
border-radius: same as regular

Icon Panel:
background-color: same as regular
right border-color: same as regular
right border-width: same as regular
icon-color: same as regular
C Selected Node (Container):
background-color: --sapButton_Selected_Background
border-color: --sapButton_Track_Selected_BorderColor
border-width: 0.125rem 0.125rem 0.25rem 0.125rem (2px 2px 4px 2px)
border-radius: same as regular

Icon Panel:
background-color: --sapCriticalColor
right border-color: same as regular
right border-width: same as regular
icon-color: --sapContent_ContrastIconColor
D Selected and Hover Node (Container):
background-color: --sapButton_Selected_Hover_Background
border-color: --sapButton_Track_Selected_Hover_BorderColor
border-width: same as selected
border-radius: same as regular

Icon Panel:
background-color: same as selected
right border-color: same as regular
right border-width: same as regular
icon-color: same as selected
E Hover While Dragging Another Element See section “All”
F Focus outline-offset: 0.125rem (2px)
border-color: --sapContent_FocusColor
border-width: --sapContent_FocusWidth
border style: --sapContent_FocusStyle
G DSP Impact and Lineage: On Highlight Path Node (Container):
background-color: same as regular
border-color: --sapButton_Track_Selected_BorderColor
border-width: 0.0625rem 0.0625rem 0.25rem 0.0625rem (1px 1px 4px 1px)
border-radius: same as regular

Icon Panel:
background-color: same as regular
right border-color: same as regular
right border-width: same as regular
icon-color: same as regular
H DSP Impact and Lineage: Outside Highlight Path opacity: sapContent_DisabledOpacity

Success

DSP and SAC

Eight interaction states of the Success semantic node. A) Default with a green border, light green icon panel, and green checkmark badge. B) Hover with a greyed body, light green icon panel, and green checkmark badge. C) Selected state with a dark green icon panel, light blue fill, and green checkmark badge. D) Selected and hover state with a darker blue fill, dark green icon panel, and green checkmark badge. E) Hover while dragging state with a light blue fill and solid blue border. F) Focus with a dark blue outline around a regular state node. G) On highlight path state with a blue bottom border on a regular state node. H) Outside highlight path state appears the same as the on highlight path state but at a reduced opacity.

Value Description Details
A Regular Node (Container):
background-color: --sapButton_Background
border-color: --sapButton_Track_BorderColor
border-width: --sapButton_BorderWidth
border-radius: --sapButton_BorderCornerRadius

Icon Panel:
background-color: --sapSuccessBackground
right border-color: --sapButton_Track_BorderColor
right border-width: --sapButton_BorderWidth
icon-color: --sapPositive_TextColor
B Hover Node (Container):
background-color: --sapButton_Hover_Background
border-color: same as regular
border-width: same as regular
border-radius: same as regular

Icon Panel:
background-color: same as regular
right border-color: same as regular
right border-width: same as regular
icon-color: same as regular
C Selected Node (Container):
background-color: --sapButton_Selected_Background
border-color: --sapButton_Track_Selected_BorderColor
border-width: 0.125rem 0.125rem 0.25rem 0.125rem (2px 2px 4px 2px)
border-radius: same as regular

Icon Panel:
background-color: --sapPositiveColor
right border-color: same as regular
right border-width: same as regular
icon-color: --sapContent_ContrastIconColor
D Selected and Hover Node (Container):
background-color: --sapButton_Selected_Hover_Background
border-color: --sapButton_Track_Selected_Hover_BorderColor
border-width: same as selected
border-radius: same as regular

Icon Panel:
background-color: same as selected
right border-color: same as regular
right border-width: same as regular
icon-color: same as selected
E Hover While Dragging Another Element See section “All”
F Focus outline-offset: 0.125rem (2px)
border-color: --sapContent_FocusColor
border-width: --sapContent_FocusWidth
border style: --sapContent_FocusStyle
G DSP Impact and Lineage: On Highlight Path Node (Container):
background-color: same as regular
border-color: --sapButton_Track_Selected_BorderColor
border-width: 0.0625rem 0.0625rem 0.25rem 0.0625rem (1px 1px 4px 1px)
border-radius: same as regular

Icon Panel:
background-color: same as regular
right border-color: same as regular
right border-width: same as regular
icon-color: same as regular
H DSP Impact and Lineage: Outside Highlight Path opacity: sapContent_DisabledOpacity

All

BDC, DSP, and SAC

A single node with a light blue fill and solid blue border, showing a "hover while dragging another element" state

Value Description Details
E Hover While Dragging Another Element Node (Container):
background-color: --sapList_SelectionBackgroundColor
border-color: --sapContent_DragAndDropActiveColor
border-width: 0.125rem (2px)
border-radius: --sapButton_BorderCornerRadius

Icon Panel:
background-color: --sapList_SelectionBackgroundColor
right border-color: --sapContent_DragAndDropActiveColor
right border-width: --sapButton_BorderWidth
icon-color: --sapContent_DragAndDropActiveColor

Heading / Subheading:
heading text-color: --sapContent_DragAndDropActiveColor
subheading text-color: ---sapContent_DragAndDropActiveColor

Transformation Flow Placeholder

DSP only

Five placeholder node states. A) Default with a yellow/amber fill and dashed orange border. B) Hover with a yellow/amber fill and solid orange border. C) Down state with a white fill and dashed orange border. D) Hover state with a light blue fill and solid blue border. E) Regular state with a solid blue border to indicate a focus state.

Value Description Details
A Regular Node (Container):
background-color: --sapButton_Attention_Background
border-color: --sapWarningBorderColor
border-width: --sapButton_BorderWidth
border-radius: --sapButton_BorderCornerRadius
border-style: dashed 0.125rem gap 0.125rem
heading text-color: --sapButton_Attention_TextColor
heading text-shadow: --sapContent_TextShadow

Icon Panel:
background-color: --sapButton_Attention_Background
right border-color: --sapWarningBorderColor
right border-width: --sapButton_BorderWidth
right border-style: dash 0.125rem gap 0.125rem
icon-color: --sapButton_Attention_TextColor
B Hover Node (Container):
background-color: --sapButton_Attention_Hover_Background
border-color: same as regular
border-width: same as regular
border-radius: same as regular
border-style: same as regular
heading text-color: same as regular
heading text-shadow: same as regular

Icon Panel:
background-color: --sapButton_Attention_Hover_Background
right border-color: same as regular
right border-width: same as regular
right border-style: same as regular
icon-color: same as regular
C Down Node (Container):
background-color: --sapButton_Attention_Active_Background
border-color: same as regular
border-width: same as regular
border-radius: same as regular
border-style: same as regular
heading text-color: same as regular
heading text-shadow: same as regular

Icon Panel:
background-color: --sapButton_Attention_Active_Background
right border-color: same as regular
right border-width: same as regular
right border-style: same as regular
icon-color: same as regular
D Hover While Dragging Another Element Node (Container):
background-color: --sapList_SelectionBackgroundColor
border-color: --sapContent_DragAndDropActiveColor
border-width: 0.125rem
border-radius: same as regular
border-style: solid
heading text-color: --sapContent_DragAndDropActiveColor
heading text-shadow: same as regular

Icon Panel:
background-color: --sapList_SelectionBackgroundColor
right border-color: --sapContent_DragAndDropActiveColor
right border-width: same as regular
right border-style: solid
icon-color: --sapContent_DragAndDropActiveColor
H Focus outline-offset: 0.125rem (2px)
border-color: --sapContent_FocusColor
border-width: --sapContent_FocusWidth
border style: --sapContent_FocusStyle

Task Chain Drop Zone

DSP only

Three drop zone states. A) Default state with a dashed light blue border and "Drag nodes here" label. B) Hover state with a solid blue border. C) Active drop target state with a dashed bold blue border and dark blue outline indicting a focus state.

Value Description Details
A Regular Node (Container):
background-color: --sapInformation_Background
border-color: --sapInformationBorderColor
border-width: --sapButton_BorderWidth
border-radius: --sapButton_BorderCornerRadius
border-style: dashed 0.125rem gap 0.125rem

Text:
text-style: --sapButton_FontFamily
text-color: --sapButton_Information_TextColor
text-shadow: --sapContent_TextShadow
B Hover While Dragging Another Element Node (Container):
background-color: --sapList_SelectionBackgroundColor
border-color: --sapContent_DragAndDropActiveColor
border-width: 0.125rem
border-radius: same as regular
border-style: solid

Text:
text-style: same as regular
text-color: --sapContent_DragAndDropActiveColor
text-shadow: same as regular
C Focus outline-offset: 0.125rem (2px)
border-color: --sapContent_FocusColor
border-width: --sapContent_FocusWidth
border style: --sapContent_FocusStyle