How --dxp Styling Hooks Map 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
Basic
Background Color	`--dxp-g-root` `--dxp-g-root-1` `--dxp-g-root-2` `--dxp-g-root-3`
Text Color	`--dxp-g-root-contrast` `--dxp-g-root-contrast-1` `--dxp-g-root-contrast-2` `--dxp-g-root-contrast-3`
Brand Color	`--dxp-g-brand` `--dxp-g-brand-1` `--dxp-g-brand-2` `--dxp-g-brand-3`
Brand Foreground Color	`--dxp-g-brand-contrast` `--dxp-g-brand-contrast-1` `--dxp-g-brand-contrast-2` `--dxp-g-brand-contrast-3`
Text
Heading 1	`--dxp-s-text-heading-extra-large-color`
Heading 2	`--dxp-s-text-heading-large-color`
Heading 3	`--dxp-s-text-heading-medium-color`
Heading 4	`--dxp-s-text-heading-small-color`
Paragraph 1	`--dxp-s-body-text-color`
Paragraph 2	`--dxp-s-body-small-text-color`
Links
Link Color	`--dxp-s-link-text-color`
Link Hover Color	`--dxp-s-link-text-color-hover`
Buttons
Button Color	`--dxp-s-button-color`
Button Hover	`--dxp-s-button-color-hover`
Button Focus	`--dxp-s-button-color-focus`
Button Active	`--dxp-s-button-color-active`
Forms
Input Text	`--dxp-s-form-element-text-color`
Field Label	`--dxp-s-form-element-label-color`
Field Background Fill	`--dxp-s-form-element-color-background`
Field Border Color	`--dxp-s-form-element-color-border`
Dropdowns
Dropdown Text Color	`--dxp-s-dropdown-text-color`
Dropdown Background Color	`--dxp-s-dropdown-color-background`
Dropdown Text Hover Color	`--dxp-s-dropdown-text-color-hover`
Dropdown Background Hover Color	`--dxp-s-dropdown-color-background-hover`
Dropdown Border Color	`--dxp-s-dropdown-color-border`

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

Tip

Images

These Theme panel properties...	...map to these --dxp styling hooks
Site Logo	`--dxp-s-site-logo-path` `--dxp-s-site-logo-url`
Browser Icon (Favicon)	No styling hook. To add a favicon in Experience Builder, click Theme \| Images and upload the file. After upload, the favicon is added automatically to your site’s browser tab.

See Create a Configurable Site Logo Component.

Text

With the base font size properties, which you set on the <html> element, you can set the default desktop and mobile font sizes for your site. When you change the base font size, you proportionally adjust any site elements, such as font sizes or spacing values, whose size is specified with relative units (rem or em).

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 this format.

1--dxp-s-level-style

In the Headings and Body portion of this table, replace level with these values, as appropriate. For text in buttons, see the Buttons section.

text-heading-extra-large for Heading 1
text-heading-large for Heading 2
text-heading-medium for Heading 3
text-heading-small for Heading 4
body for Paragraph 1
body-small for Paragraph 2

For example, the --dxp styling hook for the Heading 1’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
Desktop Base Font Size	`--dxp-s-html-font-size`
Mobile Base Font Size	--dxp-s-html-font-size-mobile
Headings and Body
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 Case	`--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 Padding: Top & Bottom	`--dxp-s-section-content-spacing-block-start` `--dxp-s-section-content-spacing-block-end`
Section Padding: Left & Right	`--dxp-s-section-content-spacing-inline-start` `--dxp-s-section-content-spacing-inline-end`
Column Gutters	`--dxp-s-column-spacer-size`
Vertical Space Between Components	`--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 Padding: Top & Bottom	`--dxp-s-section-content-spacing-block-start-mobile` `--dxp-s-section-content-spacing-block-end-mobile`
Section Padding: Left & Right	`--dxp-s-section-content-spacing-inline-start-mobile` `--dxp-s-section-content-spacing-inline-end-mobile`
Column Gutters	`--dxp-s-column-spacer-size-mobile`
Vertical Space Between Components	`--dxp-s-component-wrapper-spacer-size-mobile`

Buttons

When you set the base font size for the text on your site (see the Text section), that setting affects the default font size of the text in the buttons on your site. For button colors, see the Colors section.

These Theme panel properties...	...map to these --dxp styling hooks
Text Values for All Buttons
Font Family	`--dxp-s-button-font-family`
Font Style	`--dxp-s-button-font-style`
Font Weight	`--dxp-s-button-font-weight`
Text Case	`--dxp-s-button-text-transform`
Line Height	`--dxp-s-button-line-height`
Character Spacing	`--dxp-s-button-letter-spacing`
Standard Button Values
Horizontal Padding	`--dxp-s-button-padding`
Font Size	`--dxp-s-button-font-size`
Border Radius	`--dxp-s-button-radius-border`
Small Button Values
Horizontal Padding	`--dxp-s-button-small-padding`
Font Size	`--dxp-s-button-small-font-size`
Border Radius	`--dxp-s-button-small-radius-border`
Large Button Values
Horizontal Padding	`--dxp-s-button-large-padding`
Font Size	`--dxp-s-button-large-font-size`
Border Radius	`--dxp-s-button-large-radius-border`

Forms

These Theme panel properties...	...map to these --dxp styling hooks
Border Radius	`--dxp-s-form-element-radius-border`
Border Weight	`--dxp-s-form-element-width-border`

LWR Sites for Experience Cloud