LWR Sites for Experience Cloud

LWR Sites for Experience Cloud
Get to Know the Template
Start Building Your LWR Site
Brand Your LWR Site
How Branding Works in LWR Sites
Enable --dxp Styling Hooks
--dxp Styling Hooks
How --dxp Styling Hooks Map to Theme Panel Properties
Brand Custom Components Using --dxp Styling Hooks
Override Component Branding with Custom CSS
Create a Section Color Palette
Create a Configurable Site Logo Component
Add Custom Fonts
Remove SLDS
Create a Multilingual LWR Site
Add Additional Customizations
PDF

Newer Version Available

This content describes an older version of this product. View Latest

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.
Theme panel in Experience Builder

Theme panel properties

Colors

These Theme panel properties... ...map to these --dxp styling hooks
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

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

See Create a Configurable Site Logo Component.

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 this format.
1--dxp-s-level-style
In the Headings, Body, and Button section in the following table, replace level with these values, as appropriate.
  • 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
  • button for Button Text
So 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 --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 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