<div> <div>Label</div> <div>Description</div> <div>Morning Horizon</div> <div>Evening Horizon</div> <div>HCW & HCB</div> </div> <div> <div>A</div> <div>Bar</div> <div><strong>Width:</strong> 100%<br><strong>Height:</strong> 2.75 rem (results in 44 px)<br><strong>Background Color:</strong> var(--sapPageFooter_Background)<strong>Border (top):</strong> 1px solid var(--sapPageFooter_BorderColor)</div> <div><strong>Width:</strong> 100%<br><strong>Height:</strong> 2.75 rem (results in 44 px)<br><strong>Background Color:</strong> var(--sapPageFooter_Background)<strong>Border (top):</strong> 1px solid var(--sapPageFooter_BorderColor)</div> <div><strong>Width:</strong> 100%<br><strong>Height:</strong> 2.75 rem (results in 44 px)<br><strong>Background Color:</strong> var(--sapPageFooter_Background)<strong>Border (top):</strong> 1px solid var(--sapPageFooter_BorderColor)</div> </div> <div> <div>B</div> <div>Inactive Dot</div> <div> <p><strong>Inherits the interaction states and shape from <a href="https%3A%2F%2Fwiki.wdf.sap.corp%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2698912599%23Button(Horizon)-TertiaryTransparentHighlightButton">Tertiary Transparent Highlight Button</a>,</strong><br><strong>but has some deviations, listed below:</strong></p> <p><strong>Clickable / Touchable Container Area:</strong></p> <p><strong>Size:</strong> 2.25 x 2.25 rem<br><strong>Position:</strong> All "buttons" are together horizontally and vertically center-aligned within the bar</p> <p><strong>Inactive Dot:</strong></p> <p><strong>Size:</strong> 0.25 rem x 0.25 rem<br><strong>Position:</strong> horizontally and vertically center-aligned within the container (details below)<br><strong>Color:</strong> var(--sapContent_NonInteractiveIconColor);</p> </div> <div> <p><strong>Inherits the interaction states and shape from <a href="https%3A%2F%2Fwiki.wdf.sap.corp%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2698912599%23Button(Horizon)-TertiaryTransparentHighlightButton">Tertiary Transparent Highlight Button</a>,</strong><br><strong>but has some deviations, listed below:</strong></p> <p><strong>Clickable / Touchable Container Area:</strong></p> <p><strong>Size:</strong> 2.25 x 2.25 rem<br><strong>Position:</strong> All "buttons" are together horizontally and vertically center-aligned within the bar</p> <p><strong>Inactive Dot:</strong></p> <p><strong>Size:</strong> 0.25 rem x 0.25 rem<br><strong>Position:</strong> horizontally and vertically center-aligned within the container (details below)<br><strong>Color:</strong> var(--sapContent_NonInteractiveIconColor);</p> </div> <div> <p><strong>Inherits the interaction states and shape from <a href="https%3A%2F%2Fwiki.wdf.sap.corp%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2698912599%23Button(Horizon)-TertiaryTransparentHighlightButton">Tertiary Transparent Highlight Button</a>,</strong><br><strong>but has some deviations, listed below:</strong></p> <p><strong>Clickable / Touchable Container Area:</strong></p> <p><strong>Size:</strong> 2.25 x 2.25 rem<br><strong>Position:</strong> All "buttons" are together horizontally and vertically center-aligned within the bar</p> <p><strong>Inactive Dot:</strong></p> <p><strong>Size:</strong> 0.25 rem x 0.25 rem<br><strong>Position:</strong> horizontally and vertically center-aligned within the container (details below)<br><strong>Color:</strong> var(--sapContent_NonInteractiveIconColor);</p> </div> </div> <div> <div>C</div> <div>Active Dot<br>(Selected)</div> <div> <p><strong>Inherits the interaction states and shape from <a href="https%3A%2F%2Fwiki.wdf.sap.corp%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2698912599%23Button(Horizon)-TertiaryTransparentHighlightButton">Tertiary Transparent Highlight Button</a>,</strong><br><strong>but has some deviations, listed below:</strong></p> <p><strong>Clickable / Touchable Container Area:</strong></p> <p><strong>Size:</strong> 2.25 x 2.25 rem<br><strong>Position:</strong> All "buttons" are together horizontally and vertically center-aligned within the bar</p> <p><strong>Active Dot:</strong></p> <p><strong>Size:</strong> 0.5 rem x 0.5 rem<br><strong>Position:</strong> horizontally and vertically center-aligned within the container (details below)<br><strong>Color:</strong> var(--sapSelectedColor);</p> </div> <div> <p><strong>Inherits the interaction states and shape from <a href="https%3A%2F%2Fwiki.wdf.sap.corp%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2698912599%23Button(Horizon)-TertiaryTransparentHighlightButton">Tertiary Transparent Highlight Button</a>,</strong><br><strong>but has some deviations, listed below:</strong></p> <p><strong>Clickable / Touchable Container Area:</strong></p> <p><strong>Size:</strong> 2.25 x 2.25 rem<br><strong>Position:</strong> All "buttons" are together horizontally and vertically center-aligned within the bar</p> <p><strong>Active Dot:</strong></p> <p><strong>Size:</strong> 0.5 rem x 0.5 rem<br><strong>Position:</strong> horizontally and vertically center-aligned within the container (details below)<br><strong>Color:</strong> var(--sapSelectedColor);</p> </div> <div> <p><strong>Inherits the interaction states and shape from <a href="https%3A%2F%2Fwiki.wdf.sap.corp%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2698912599%23Button(Horizon)-TertiaryTransparentHighlightButton">Tertiary Transparent Highlight Button</a>,</strong><br><strong>but has some deviations, listed below:</strong></p> <p><strong>Clickable / Touchable Container Area:</strong></p> <p><strong>Size:</strong> 2.25 x 2.25 rem<br><strong>Position:</strong> All "buttons" are together horizontally and vertically center-aligned within the bar</p> <p><strong>Active Dot:</strong></p> <p><strong>Size:</strong> 0.5 rem x 0.5 rem<br><strong>Position:</strong> horizontally and vertically center-aligned within the container (details below)<br><strong>Color:</strong> var(--sapSelectedColor);</p> </div> </div>

<div> <div>Label</div> <div>Description</div> <div>Cozy</div> <div>Dark</div> <div>HCW & HCB</div> </div> <div> <div>-</div> <div>Regular State</div> <div> <p><strong>Clickable / Touchable Square Area color:</strong> transparent</p> <p><strong>Dot color:</strong> var(--sapContent_NonInteractiveIconColor);</p> </div> <div> <p><strong>Clickable / Touchable Square Area color:</strong> transparent</p> <p><strong>Dot color:</strong> var(--sapContent_NonInteractiveIconColor);</p> </div> <div> <p><strong>Clickable / Touchable Square Area color:</strong> transparent</p> <p><strong>Dot color:</strong> var(--sapContent_NonInteractiveIconColor);</p> </div> </div> <div> <div>-</div> <div>Hover State</div> <div> <p><strong>Click able</strong> / Touchable Square Area color: var(--sapButton_Lite_Hover_Background);</p> <p><strong>Dot</strong> color: var(--sapContent_NonInteractiveIconColor);</p> </div> <div> <p><strong>Clickable / Touchable Square Area color:</strong> var(--sapButton_Lite_Hover_Background);</p> <p><strong>Dot color:</strong> var(--sapContent_NonInteractiveIconColor);</p> </div> <div> <p><strong>Clickable / Touchable Square Area color:</strong> var(--sapButton_Lite_Hover_Background);</p> <p><strong>Dot color:</strong> var(--sapContent_NonInteractiveIconColor);</p> </div> </div> <div> <div>-</div> <div>Down State</div> <div> <p><strong>Click able</strong> / Touchable Square Area color: var(--sapButton_Lite_Active_Background);</p> <p><strong>Dot</strong> color: var(--sapButton_Active_TextColor);</p> <p>(The "Inactive Dot" size remains in this state, and <strong>only Inactive Dot "buttons" are clickable / touchable</strong>)</p> </div> <div> <p><strong>Clickable / Touchable Square Area color:</strong> var(--sapButton_Lite_Active_Background);</p> <p><strong>Dot color:</strong> var(--sapButton_Active_TextColor);</p> <p>(The "Inactive Dot" size remains in this state, and <strong>only Inactive Dot "buttons" are clickable / touchable</strong>)</p> </div> <div> <p><strong>Clickable / Touchable Square Area color:</strong> var(--sapButton_Lite_Active_Background);</p> <p><strong>Dot color:</strong> var(--sapButton_Active_TextColor);</p> <p>(The "Inactive Dot" size remains in this state, and <strong>only Inactive Dot "buttons" are clickable / touchable</strong>)</p> </div> </div> <div> <div>-</div> <div>Selected</div> <div> <p><strong>Click able</strong> / Touchable Square Area color: transparent</p> <p><strong>Dot</strong> color: var(--sapSelectedColor);</p> </div> <div> <p><strong>Clickable / Touchable Square Area color:</strong> transparent</p> <p><strong>Dot color:</strong> var(--sapSelectedColor);</p> </div> <div> <p><strong>Clickable / Touchable Square Area color:</strong> transparent</p> <p><strong>Dot color:</strong> var(--sapSelectedColor);</p> </div> </div> <div> <div>-</div> <div>Selected:hover</div> <div> <p><strong>Click able</strong> / Touchable Square Area color: var(--sapButton_Lite_Hover_Background);</p> <p><strong>Dot</strong> color: var(--sapSelectedColor);</p> </div> <div> <p><strong>Clickable / Touchable Square Area color:</strong> var(--sapButton_Lite_Hover_Background);</p> <p><strong>Dot color:</strong> var(--sapSelectedColor);</p> </div> <div> <p><strong>Clickable / Touchable Square Area color:</strong> var(--sapButton_Lite_Hover_Background);</p> <p><strong>Dot color:</strong> var(--sapSelectedColor);</p> </div> </div>