Migrate Custom Code From Scroll Viewport to Scroll Sites

Learn how to adjust your custom CSS or Javascript code from Scroll Viewport, so it continues to work in Scroll Sites' help center theme.

We have renamed some HTML attributes and theme tokens in Scroll Sites' help center theme and deprecated some others that existed in Scroll Viewport.

Please adjust your custom code according to the updates detailed in the tables below.

Renamed HTML Attributes

Name in Scroll Viewport	🆕 Name in Scroll Sites
`data-vp-component`	`data-component`
`data-vp-variant`	`data-appearance`
`data-vp-page-template`	`data-page-template` Supported values stay unchanged: portal content-source article search error
`data-vp-page-id`	`data-page-id` Contains the Scroll Sites page id. Not the Confluence page id as it used to in Scroll Viewport.

Renamed Theme Tokens

The vpt prefix was removed from all theme tokens.

Example: --vpt-theme-text-font is now --theme-text-font

Name in Scroll Viewport	🆕 Name in Scroll Sites
`--vpt-theme-text-font`	`--theme-text-font`
`--vpt-theme-text-color`	`--theme-text-color`
`--vpt-theme-text-scale`	`--theme-text-scale`
`--vpt-theme-headline-font`	`--theme-headline-font`
`--vpt-theme-headline-color`	`--theme-headline-color`
`--vpt-theme-headline-scale`	`--theme-headline-scale`
`--vpt-theme-header-text-color`	`--theme-header-text-color`
`--vpt-theme-header-background-color`	`--theme-header-background-color`
`--vpt-theme-header-height`	`--theme-header-height`
`--vpt-theme-footer-text-color`	`--theme-footer-text-color`
`--vpt-theme-footer-background-color`	`--theme-footer-background-color`
`--vpt-theme-banner-text-color`	`--theme-banner-text-color`
`--vpt-theme-banner-image`	`--theme-banner-image`
`--vpt-theme-banner-background-color`	`--theme-banner-background-color`
`--vpt-theme-primary-color`	`--theme-primary-color`
`--vpt-theme-on-primary-color`	`--theme-on-primaryl-color`
`--vpt-theme-container-width`	`--theme-container-width`
`--vpt-theme-scroll-offset`	`--theme-scroll-offset`
`--vpt-theme-roundness`	`--theme-roundness`

Removed Viewport legacy tokens

All legacy tokens that were already deprecated in Scroll Viewport have been removed in Scroll Sites.

Removed Tokens
`--vp-grid-step`
`--vp-layout-header-height`
`--vp-layout-scroll-offset`
`--vp-layout-container-width`
`--vp-footer-text-color`
`--vp-footer-background-color`
`--vp-header-text-color`
`--vp-header-background-color`
`--vp-button-variant-floating-action-size`
`--vp-mobile-menu-trigger-position-right`
`--vp-mobile-menu-trigger-position-bottom`
`--vp-color-black`
`--vp-color-downriver-blue`
`--vp-color-medium-gray`
`--vp-color-stratos-blue`
`--vp-color-blue`
`--vp-color-athens-gray-rgb`
`--vp-color-athens-gray`
`--vp-color-dark-gray`
`--vp-color-dark-gray-01`
`--vp-color-light-gray-rgb`
`--vp-color-light-gray`
`--vp-color-white-rgb`
`--vp-color-white`
`--vp-border-radius-small`
`--vp-border-radius-big`
`--vp-color-border-default`
`--vp-color-border-focused`
`--vp-color-background-active`
`--vp-color-text-default`
`--vp-color-text-on-active`
`--vp-ease-out-quint`
`--vp-focus-ring-inner-color`
`--vp-focus-ring-outer-color`
`--vp-font-family-code`
`--vp-font-family-default`
`--vp-font-family-headline`
`--vp-font-size-standard`
`--vp-heading-h1-font-size`
`--vp-heading-h1-font-size-mobile`
`--vp-heading-h1-line-height`
`--vp-heading-h1-line-height-mobile`
`--vp-roundness-interactive-elements`
`--vp-roundness-overlays`
`--vp-roundness-images`
`--vp-portal-banner-background-image`
`--vp-portal-banner-shadow`
`--vp-portal-banner-text-color`
`--vp-space-banner-background-image`
`--vp-space-banner-shadow`
`--vp-space-banner-text-color`
`--vp-button-background`
`--vp-button-foreground`
`--vp-button-variant-outline-background`
`--vp-button-variant-outline-foreground`
`--vp-button-variant-subtle-foreground`
`--K15t-layout-header-height`
`--K15t-layout-scroll-offset`
`--K15t-layout-container-width`
`--K15t-header-foreground`
`--K15t-header-background`
`--K15t-banner-foreground`
`--K15t-banner-background`
`--K15t-banner-image`
`--K15t-footer-foreground`
`--K15t-footer-background`
`--K15t-fab-size`
`--K15t-fab-offset-block`
`--K15t-fab-offset-inline`