One of the coolest addition to lightning components in Spring 16 release has been Lightning components Tokens .This feature is in developer preview mode and I already see use case for this feature .
Tokens make it easy to ensure that your design is consistent, and even easier to update it as your design evolves.
In this blogpost we will discover how to create these design tokens and how to use it inside the lightning components .I am using spring 16 pre-release org to demonstrate .This feature will be available only after your sandboxes are upgraded to spring 16 release .
Developer console is quickest method to edit and create lightning resources .In developer console you will see lightning tokens
To create a design token simply click on the lightning Tokens
.
One important thing thats mandatory is to name the lightning Tokens file as "defaultTokens" .This is very important the tokens defined within it are automatically accessible in all Lightning components.
Before we actually start creating lightning Tokens file one thing to note is Salesforce exposes a set of “base” tokens that we can access in our component style resources apart from custom tokens we create .To do this we will also extend our lightning component tokens from Base tokens .
Here is a sample lightning component tokens file
Here is a sample example component showing how to use design tokens in CSS resource file .
It almost feels like custom labels to me but this is meant for use in the CSS design variables .It makes it easy to keep all design variables in a single resource and any change or update later one can avoid duplication of code and update from one single file .
I am eagerly waiting to see updated lightning components developer guide where salesforce will expose some of the tokens used in the SLDS .
Feel free to spread the word of this upcoming feature but note that salesforce safe harbour applies .
No comments:
Post a Comment