Use Lightning Design System Design Tokens in LWC

 

Design tokens are named entities that store visual design attributes, such as margins and spacing values, font sizes and families, or hex values for colors.

Use CSS variables in a Lightning web component to access Lightning Design System design tokens. Lightning web components can use any Lightning Design System design token marked Global Access.

designTokenInLWC.html

 <template>

<div>Design Token in LWC</div>

</template>

designTokenInLWC.js

import { LightningElement } from 'lwc';

export default class DesignTokenInLWC extends LightningElement {}

To reference a design token in your Lightning web component’s CSS, use the --lwc- prefix and reference the token name in camelCase

/* myWebComponent.css */
div {
    margin-right: var(--lwc-spacingSmall);
}

designTokenInLWC.css

  div{

color:var(--lwc-brandAccessible);

background:var(--lwc-colorBackgroundAlt);

}