SAP Fiori / UI5 Web Components: density token view

Generated from the normalized JSON extract. Edit the JSON source and rerun the parent render-markdown.ps1 renderer; do not edit this page by hand.

  • Scope: density-relevant public tokens
  • Architecture model: inherited cozy/compact content-density context with component custom properties
  • Evidence: repository plus official documentation
  • Exact token coverage: medium; global theme package external
  • System report
  • Source record
  • Authoritative JSON

Snapshot

FieldValue
commitacef092f414de934c282e2d393a7b18a7dee93cc
retrieved2026-08-11

How density is activated

MechanismPublic implementation
runtimeContext—ui5_content_density: compact
componentResolutiongetEffectiveContentDensity resolves component and ancestor context
css@container style(—ui5_content_density: compact)
modescozy, compact

Density-relevant tokens and values

Token or mappingTypePublic values and metadataSource
documented-cozy-interactive-areadimensionupstreamValue: 2.75rem; derivedPx: 44SAP Fiori content-density documentation
documented-compact-row-or-toolbardimensionupstreamValue: 2rem; derivedPx: 32SAP Fiori content-density documentation
—_ui5_input_min_widthdimensionvalues: cozy: 2.75rem; compact: 2rem; derivedPx: cozy: 44; compact: 32sources/sap-fiori-ui5/upstream/webcomponents/packages/main/src/themes/base/Input-parameters.css
—_ui5_input_min_width_tokenizer_availabledimensionvalues: cozy: 3rem; compact: 2rem; derivedPx: cozy: 48; compact: 32sources/sap-fiori-ui5/upstream/webcomponents/packages/main/src/themes/base/Input-parameters.css
—_ui5_input_heightdimensionvalue: var(—sapElement_Height)sources/sap-fiori-ui5/upstream/webcomponents/packages/main/src/themes/base/Input-parameters.css
—_ui5_input_margin_top_bottomdimensionvalues: cozy: 0.25rem; compact: 0.1875rem; derivedPx: cozy: 4; compact: 3sources/sap-fiori-ui5/upstream/webcomponents/packages/main/src/themes/base/Input-parameters.css
—_ui5_input_icon_widthdimensionvalues: cozy: 2.25rem; compact: 2rem; derivedPx: cozy: 36; compact: 32sources/sap-fiori-ui5/upstream/webcomponents/packages/main/src/themes/base/Input-parameters.css
—_ui5_input_custom_icon_paddingdimensionvalues: cozy: 0.5625rem 0.625rem; compact: 0.25rem 0.5rem; derivedPx: cozy: 9px 10px; compact: 4px 8pxsources/sap-fiori-ui5/upstream/webcomponents/packages/main/src/themes/base/Input-parameters.css
—_ui5_button_base_min_widthdimensionvalue: 2.5rem; derivedPx: 40sources/sap-fiori-ui5/upstream/webcomponents/packages/main/src/themes/base/Button-parameters.css
—_ui5_button_base_heightdimensionvalue: var(—sapElement_Height)sources/sap-fiori-ui5/upstream/webcomponents/packages/main/src/themes/base/Button-parameters.css
—_ui5_button_base_paddingdimensionvalue: 0.6875rem; derivedPx: 11sources/sap-fiori-ui5/upstream/webcomponents/packages/main/src/themes/base/Button-parameters.css
—_ui5_table_cell_min_widthdimensionvalue: 2.75rem; derivedPx: 44sources/sap-fiori-ui5/upstream/webcomponents/packages/main/src/themes/base/Table-parameters.css
—_ui5_table_cell_horizontal_paddingdimensionvalue: 0.5rem; derivedPx: 8sources/sap-fiori-ui5/upstream/webcomponents/packages/main/src/themes/base/Table-parameters.css
—_ui5_table_cell_vertical_paddingdimensionvalue: 0.25rem; derivedPx: 4sources/sap-fiori-ui5/upstream/webcomponents/packages/main/src/themes/base/Table-parameters.css

How tokens reach components

Component or boundaryMapping
inputancestor density -> style query -> private input custom properties; height aliases the external SAP theme parameter —sapElement_Height
buttonheight aliases —sapElement_Height; component CSS consumes private button properties
listAndTablecomponent CSS consumes base-height/cell variables and contains compact style-query branches
typographyFiori guidance keeps type the same between cozy and compact

Public evidence gaps

  • The global SAP theme package that defines —sapElement_Height was not mirrored; UI5 Web Components consumes it as an external theme boundary.
  • Public Figma variable implementation was not available in the inspected sources.

Embedded authoritative JSON

Show raw JSON
{
  "system": "SAP Fiori / UI5 Web Components",
  "scope": "density-relevant public tokens",
  "model": "inherited cozy/compact content-density context with component custom properties",
  "snapshot": {"commit": "acef092f414de934c282e2d393a7b18a7dee93cc", "retrieved": "2026-08-11"},
  "activation": {
    "runtimeContext": "--ui5_content_density: compact",
    "componentResolution": "getEffectiveContentDensity resolves component and ancestor context",
    "css": "@container style(--ui5_content_density: compact)",
    "modes": ["cozy", "compact"]
  },
  "tokens": [
    {"name": "documented-cozy-interactive-area", "type": "dimension", "upstreamValue": "2.75rem", "derivedPx": 44, "source": "SAP Fiori content-density documentation"},
    {"name": "documented-compact-row-or-toolbar", "type": "dimension", "upstreamValue": "2rem", "derivedPx": 32, "source": "SAP Fiori content-density documentation"},
    {"name": "--_ui5_input_min_width", "type": "dimension", "values": {"cozy": "2.75rem", "compact": "2rem"}, "derivedPx": {"cozy": 44, "compact": 32}, "source": "sources/sap-fiori-ui5/upstream/webcomponents/packages/main/src/themes/base/Input-parameters.css"},
    {"name": "--_ui5_input_min_width_tokenizer_available", "type": "dimension", "values": {"cozy": "3rem", "compact": "2rem"}, "derivedPx": {"cozy": 48, "compact": 32}, "source": "sources/sap-fiori-ui5/upstream/webcomponents/packages/main/src/themes/base/Input-parameters.css"},
    {"name": "--_ui5_input_height", "type": "dimension", "value": "var(--sapElement_Height)", "source": "sources/sap-fiori-ui5/upstream/webcomponents/packages/main/src/themes/base/Input-parameters.css"},
    {"name": "--_ui5_input_margin_top_bottom", "type": "dimension", "values": {"cozy": "0.25rem", "compact": "0.1875rem"}, "derivedPx": {"cozy": 4, "compact": 3}, "source": "sources/sap-fiori-ui5/upstream/webcomponents/packages/main/src/themes/base/Input-parameters.css"},
    {"name": "--_ui5_input_icon_width", "type": "dimension", "values": {"cozy": "2.25rem", "compact": "2rem"}, "derivedPx": {"cozy": 36, "compact": 32}, "source": "sources/sap-fiori-ui5/upstream/webcomponents/packages/main/src/themes/base/Input-parameters.css"},
    {"name": "--_ui5_input_custom_icon_padding", "type": "dimension", "values": {"cozy": "0.5625rem 0.625rem", "compact": "0.25rem 0.5rem"}, "derivedPx": {"cozy": "9px 10px", "compact": "4px 8px"}, "source": "sources/sap-fiori-ui5/upstream/webcomponents/packages/main/src/themes/base/Input-parameters.css"},
    {"name": "--_ui5_button_base_min_width", "type": "dimension", "value": "2.5rem", "derivedPx": 40, "source": "sources/sap-fiori-ui5/upstream/webcomponents/packages/main/src/themes/base/Button-parameters.css"},
    {"name": "--_ui5_button_base_height", "type": "dimension", "value": "var(--sapElement_Height)", "source": "sources/sap-fiori-ui5/upstream/webcomponents/packages/main/src/themes/base/Button-parameters.css"},
    {"name": "--_ui5_button_base_padding", "type": "dimension", "value": "0.6875rem", "derivedPx": 11, "source": "sources/sap-fiori-ui5/upstream/webcomponents/packages/main/src/themes/base/Button-parameters.css"},
    {"name": "--_ui5_table_cell_min_width", "type": "dimension", "value": "2.75rem", "derivedPx": 44, "source": "sources/sap-fiori-ui5/upstream/webcomponents/packages/main/src/themes/base/Table-parameters.css"},
    {"name": "--_ui5_table_cell_horizontal_padding", "type": "dimension", "value": "0.5rem", "derivedPx": 8, "source": "sources/sap-fiori-ui5/upstream/webcomponents/packages/main/src/themes/base/Table-parameters.css"},
    {"name": "--_ui5_table_cell_vertical_padding", "type": "dimension", "value": "0.25rem", "derivedPx": 4, "source": "sources/sap-fiori-ui5/upstream/webcomponents/packages/main/src/themes/base/Table-parameters.css"}
  ],
  "componentMappings": {
    "input": "ancestor density -> style query -> private input custom properties; height aliases the external SAP theme parameter --sapElement_Height",
    "button": "height aliases --sapElement_Height; component CSS consumes private button properties",
    "listAndTable": "component CSS consumes base-height/cell variables and contains compact style-query branches",
    "typography": "Fiori guidance keeps type the same between cozy and compact"
  },
  "unavailable": [
    "The global SAP theme package that defines --sapElement_Height was not mirrored; UI5 Web Components consumes it as an external theme boundary.",
    "Public Figma variable implementation was not available in the inspected sources."
  ]
}