How to retrieve color token inside the CSS resource of a component

Inside the css resource of a lightning component, is there a way to retrieve the various values that were set inside the branding editor ?

enter image description here

For example, I would like to be able to do something similar to this

.THIS #MyCustomActionButton {
    background: [some token here that reference the blue Action Color];
}

Thanks!

Answer

Right now, you won’t be able to get those values directly. However, they are accessible via some css tokens that you can set on your components:

/* New classes available in Napili (only ActionColor is available in Koa/ Kokua) */

/* Action Color */
.THIS .betaTokenActionColorText {
   color: t(colorBrand);
}

.THIS .betaTokenActionColorBG {
   background-color: t(colorBrand);
}

.THIS .betaTokenActionColorBorder {
   border-color: t(colorBrand);
}

/* Action Color Darker */
.THIS .betaTokenActionColorDarkerText {
   color: t(colorBackgroundButtonBrandHover);
}

.THIS .betaTokenActionColorDarkerBG {
   background-color: t(colorBackgroundButtonBrandHover);
}

.THIS .betaTokenActionColorDarkerBGHover:hover {
background-color: t(colorBackgroundButtonBrandHover);
}

.THIS .betaTokenActionColorDarkerBorder {
   border-color: t(colorBackgroundButtonBrandHover);
}

/* Link Color */
.THIS .betaTokenLinkColorText {
   color: t(colorTextLink);
}

.THIS .betaTokenLinkColorBG {
   background-color: t(colorTextLink);
}

.THIS .betaTokenLinkColorBorder {
   border-color: t(colorTextLink);
}

/* Link Color Darker */
.THIS .betaTokenLinkColorDarkerText {
   color: t(colorTextLinkHover);
}

.THIS .betaTokenLinkColorDarkerBG {
   background-color: t(colorTextLinkHover);
}

.THIS .betaTokenLinkColorDarkerBorder {
   border-color: t(colorTextLinkHover);
}

/* Border Color */
.THIS .betaTokenBorderColorText {
   color: t(colorBorder);
}

.THIS .betaTokenBorderColorBG {
   background-color: t(colorBorder);
}

.THIS .betaTokenBorderColorBorder {
border-color: t(colorBorder);
}

Attribution
Source : Link , Question Author : Olivier Lamothe , Answer Author : user26375

Leave a Comment