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
--dxp Styling Hooks
Color --dxp Styling Hooks
Text --dxp Styling Hooks
Site Spacing --dxp Styling Hooks
Map --dxp Styling Hooks to Theme Panel Properties
Enable --dxp Styling Hooks
Brand Custom Components Using --dxp Styling Hooks
Override Component Branding with Custom CSS
Create a Section Color Palette
Add Custom Fonts
Remove SLDS
Create a Multilingual LWR Site (Beta)
Add Additional Customizations
PDF

Newer Version Available

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

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

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:
In the Headings, Body, and Button section in the following table, replace level with the following 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:
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