Intro

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

For iOS specific themed colour values use https://www.sap.com/design-system/fiori-design-ios/v26-4/foundations/colors.

All values are based on base scale designs using px, but use pt for iOS code, and dp for Android.

Default

Spec diagram of two fullscreen tooltip variants with lettered callouts (A–F) labeling the measure label, primary value, dimension row area, dimension rows, pagination dots, and outer container boundary

Value Description Details
A Primary Label Font: 72 iOS Caption 1
Alignment: Left aligned
All around padding: 0rem (0px)
B Primary Value Font: 72 iOS Title 2 Bold

Alignment: Left aligned
Show full value, no abbreviations
Round to two decimal places

All around padding: 0rem (0px)
C Spacing Gap: 0.25rem (4px)
D Data Row Control:
SwiftUI Data Table: Data Table Row
Fiori iOS Guidelines: Data Table Row

Text:
Font: 72 iOS Caption 1

Rows:
Spacing between rows: 0rem (0px)
On first page: Max 3 rows
Page 2 and onwards: Max 6 rows
E Page Control All around padding: 0rem (0px)
F Container Control:
SwiftUI KPI Header: KPI Header
Fiori iOS Guidelines: KPI Header
Top & bottom padding: 0.5rem (8px)
Bottom border: 0.020625 rem (0.33 px)

With Variance

Spec diagram of two fullscreen tooltips with variance and an annotation describing how variances are visualized.

Value Description Details
A Primary Value Positive Variance:
Font colour: --sapPositiveColor
Add Prefix: “+”

Negative Variance:
Font colour: --sapNegativeColor
Add Prefix: “-”