Map --dxp Styling Hooks to Theme Panel Properties

Each declarative property in the Theme panel maps to one or more programmatic --dxp styling hooks. When a user updates a property in the Theme panel, the system automatically updates any Lightning web component that uses the hooks associated with that branding property.

Colors

These Theme panel properties...	...map to these --dxp styling hooks
Background Color	`--dxp-g-root` `--dxp-g-root1` `--dxp-g-root2` `--dxp-g-root3`
Text Color	`--dxp-g-root-contrast` `--dxp-g-root-contrast1` `--dxp-g-root-contrast2` `--dxp-g-root-contrast3`
Brand Color	`--dxp-g-brand` `--dxp-g-brand1` `--dxp-g-brand2` `--dxp-g-brand3`
Brand Foreground Color	`--dxp-g-brand-contrast` `--dxp-g-brand-contrast1` `--dxp-g-brand-contrast2` `--dxp-g-brand-contrast3`

See Color --dxp Styling Hooks for information about other available styling hooks that don’t appear in the Theme panel.

Tip

Text

The Base Font Size property, which maps to the --dxp-s-html-font-size styling hook, defines the font size for the <html> element of your site. Changing the base font proportionally adjusts all font sizes in your site.

The design system also provides different levels of text styling for your site. Each level includes several style properties that map to --dxp styling hooks using the following format:

1--dxp-s-level-style

In the Headings, Body and Button section in the following table, replace level with the following values, as appropriate.

text-heading-extra-large for Extra Large Heading
text-heading-large for Large Heading
text-heading-medium for Medium Heading
text-heading-small for Small Heading
body for Regular Body
body-small for Small Body
button for Button Text

So for example, the --dxp styling hook for the Extra Large Heading’s font family is:

1--dxp-s-text-heading-extra-large-font-family

These Theme panel properties...	...map to these --dxp styling hooks
Base
Font Size	`--dxp-s-html-font-size`
Headings, Body, and Button
Font Family	`--dxp-s-level-font-family`
Font Size	`--dxp-s-level-font-size`
Font Style	`--dxp-s-level-font-style`
Font Weight	`--dxp-s-level-font-weight`
Text Decoration	`--dxp-s-level-text-decoration` Doesn’t apply to Button Text.
Text Transform	`--dxp-s-level-text-transform`
Line Height	`--dxp-s-level-line-height`
Character Spacing	`--dxp-s-level-letter-spacing`
Link Text
Text Decoration	`--dxp-s-link-text-decoration`
Focus Text Decoration	`--dxp-s-link-text-decoration-focus`
Hover Text Decoration	`--dxp-s-link-text-decoration-hover`

Site Spacing

These Theme panel properties...	...map to these --dxp styling hooks
Desktop Site Spacing
Max Content Width	`--dxp-s-section-columns-max-width` `--dxp-s-header-content-max-width` `--dxp-s-footer-content-max-width`
Section Vertical Padding	`--dxp-s-section-content-spacing-block-start` `--dxp-s-section-content-spacing-block-end`
Section Column Spacing	`--dxp-s-column-spacer-size`
Component Spacing	`--dxp-s-component-wrapper-spacer-size`
Mobile Site Spacing
Max Content Width	`--dxp-s-section-columns-max-width-mobile` `--dxp-s-header-content-max-width-mobile` `--dxp-s-footer-content-max-width-mobile`
Section Vertical Padding	`--dxp-s-section-content-spacing-block-start-mobile` `--dxp-s-section-content-spacing-block-end-mobile`
Section Column Spacing	`--dxp-s-column-spacer-size-mobile`
Component Spacing	`--dxp-s-component-wrapper-spacer-size-mobile`

LWR Sites for Experience Cloud

Map --dxp Styling Hooks to Theme Panel Properties

Colors

Text

Site Spacing

See Also