Brand Custom Components Using --dxp Styling Hooks

This sample shows the code for a custom combobox component.

1<template>
2  <input type="text">
3  <ul>
4    <li>Option 1</li>
5    <li>Option 2</li>
6  </ul>
7</template>

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.

1input {
2  border-color: var(--dxp-g-neutral);
3}
4
5input:focus {
6  border-color: var(--dxp-g-brand);
7}