Lightning Aura Components Developer Guide

Introducing Aura Components
Quick Start
Creating Components
Using Components
Communicating with Events
Communicating Across the DOM with Lightning Message Service
Creating Apps
Styling Apps
Using the Salesforce Lightning Design System in Apps
Using External CSS
More Readable Styling Markup with the join Expression
Tips for CSS in Components
CSS for RTL Languages
Vendor Prefixes
Styling with Design Tokens and Styling Hooks
Tokens Bundles
Create a Tokens Bundle
Defining and Using Tokens
Using Expressions in Tokens
Extending Tokens Bundles
Using Standard Design Tokens
Replace Design Tokens with Styling Hooks
Developing Secure Code
Using JavaScript
Working with Salesforce Data
Testing Components
Debugging
Performance
Reference
PDF

Newer Version Available

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

Extending Tokens Bundles

Use the extends attribute to extend one tokens bundle from another.

Salesforce recommends that you use Styling Hooks instead of design tokens if possible. While existing design tokens still work, styling hooks are the future of customization for Lightning web components and Aura components. See Replace Design Tokens with Styling Hooks.

Important

To add tokens from one bundle to another, extend the “child” tokens bundle from the “parent” tokens, like this.
1<aura:tokens extends="yourNamespace:parentTokens">
2    <!-- additional tokens here -->
3</aura:tokens>
Overriding tokens values works mostly as you’d expect: tokens in a child tokens bundle override tokens with the same name from a parent bundle. The exception is if you’re using standard tokens. You can’t override standard tokens in Lightning Experience or the Salesforce mobile app.

Overriding standard token values is undefined behavior and unsupported. If you create a token with the same name as a standard token, it overrides the standard token’s value in some contexts, and has no effect in others. This behavior will change in a future release. Don’t use it.

Important