How --dxp Styling Hooks Map to Theme Panel Properties

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
Field Label	`--dxp-s-form-element-label-color`
Placeholder Text	`--dxp-s-form-element-placeholder-text-color`
Input Text	`--dxp-s-form-element-text-color`
Input Text Focus	`--dxp-s-form-element-text-color-focus`
Field Background Fill	`--dxp-s-form-element-color-background`
Field Background Focus	`--dxp-s-form-element-color-background-active`
Field Border	`--dxp-s-form-element-color-border`
Field Border Focus	`--dxp-s-form-element-color-border-focus`
Checkbox Background	`--dxp-s-form-checkbox-color-background`
Selected Checkbox Background	`--dxp-s-form-checkbox-color-background-checked`
Checkbox Border	`--dxp-s-form-checkbox-color-border`
Selected Checkbox Border	`--dxp-s-form-checkbox-color-border-checked`
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.

In the Headings and Body portion of this table, replace level with these values, as appropriate. For text in buttons, see the Buttons section. For text in forms, see the Forms 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

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`
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
Vertical Padding	`--dxp-s-button-padding-block-start` `--dxp-s-button-padding-block-end`
Horizontal Padding	`--dxp-s-button-padding-inline-start` `--dxp-s-button-padding-inline-end`
Font Size	`--dxp-s-button-font-size`
Border Radius	`--dxp-s-button-radius-border`
Small Button Values
Vertical Padding	`--dxp-s-button-small-padding-block-start` `--dxp-s-button-small-padding-block-end`
Horizontal Padding	`--dxp-s-button-small-padding-inline-start` `--dxp-s-button-small-padding-inline-end`
Font Size	`--dxp-s-button-small-font-size`
Border Radius	`--dxp-s-button-small-radius-border`
Large Button Values
Vertical Padding	`--dxp-s-button-large-padding-block-start` `--dxp-s-button-large-padding-block-end`
Horizontal Padding	`--dxp-s-button-large-padding-inline-start` `--dxp-s-button-large-padding-inline-end`
Font Size	`--dxp-s-button-large-font-size`
Border Radius	`--dxp-s-button-large-radius-border`

Forms

Similar to the different levels of text styling available for headings and body text on your site, the design system provides text styles for different parts of a form. In the Field Labels, Input Text, and Caption Text section of this table, replace level with these values, as appropriate.

label for Field Label
text for Input Text
caption-text for Caption

For example, the --dxp styling hook for the Field Label’s font family is

These Theme panel properties...	...map to these --dxp styling hooks
Spacing
Field Padding: Top	`--dxp-s-form-element-spacing-block-start`
Field Padding: Right	`--dxp-s-form-element-spacing-horizontal-end`
Field Padding: Bottom	`--dxp-s-form-element-spacing-block-end`
Field Padding: Left	`--dxp-s-form-element-spacing-horizontal-start`
Borders
Field Border Radius	`--dxp-s-form-element-radius-border`
Field Border Weight	`--dxp-s-form-element-width-border`
Checkbox Border Radius	`--dxp-s-form-checkbox-radius-border`
Checkbox Border Weight	`--dxp-s-form-checkbox-width-border`
Field Labels, Input Text, and Caption Text
Font Family	`--dxp-s-form-element-level-font-family`
Font Size	`--dxp-s-form-element-level-font-size`
Font Style	`--dxp-s-form-element-level-font-style`
Font Weight	`--dxp-s-form-element-level-font-weight`
Text Case	`--dxp-s-form-element-level-text-transform`
Line Height	`--dxp-s-form-element-level-line-height`
Character Spacing	`--dxp-s-form-element-level-letter-spacing`

LWR Sites for Experience Cloud