Using design tokens in slds in visualforce

Question

I have a visualforce page that uses <apex: slds/> to leverage lightning design system.

I'm trying to set background color on an element using the $color-background-backdrop-tint global variable listed in design tokens on slds documentation.

If I hard-code the hex value, it works fine.

<div class="slds-card__body" style="background-color : #fafaf9;">

If i use the global variable, it does not work.

<div class="slds-card__body" style="background-color : $color-background-backdrop-tint;">

I assume this means that these standard design tokens cant be used in visualforce, and can only be used with lightning components? Or is there something I'm missing?

Answer 1

Lightning uses a CSS preprocessor to convert the styles that you present into the CSS that will eventually be recognized by the browser. As such, you can use tokens in Visualforce, but not directly.

Here's how'd you use tokens in Visualforce.

Sass

First, go install Sass.

Get Token Bundle

Next, go get the Sass Token Bundle from the Lightning Design System Downloads page.

Write Sass Locally

Write a .sass file that contains the styling you want, and imports the tokens. Note: I don't know anything about Sass, but it's got documentation.

Compile Sass to CSS

Compile the .sass sources into CSS. At this point, your tokens will have been incorporated.

Upload Static Resource

Upload the file as a Static Resource in Salesforce.

Import CSS

Import the CSS with apex:stylesheet.

<apex:stylesheet url="{!URLFOR($Resource.myCompiledCSS)}" />

Use CSS Classes

Use the CSS classes that were built as part of compiling your Sass sources. For example, the compiled CSS might result in you writing code like this:

<div class="slds-card__body vf-backgound-color-tint">