To build a custom Lightning web component for your site that uses the design system,
use the appropriate --dxp styling hooks.
We recommend using --dxp styling hooks to make general changes across the
components in your site. But if the --dxp branding
defaults don’t provide exactly what you need, you can use --slds-c and --slds-g-color styling hooks
to fine-tune the appearance of individual components where
necessary.
This sample shows the code for a custom combobox component.
To ensure that the input looks similar to other base Lightning components that also respond
to branding changes, the CSS must reference the --dxp
styling hooks as follows.
Values of CSS custom properties are resolved at the time of evaluation.
For example, let’s say you have a CSS custom property that references another CSS custom
property. If you update the value of the latter CSS custom property in a lower scope, the
value of the former CSS custom property doesn’t reflect the new value.
j