5

I've downloaded the Lightning Design System Zip and then used styles/salesforce-lightning-design-system.css (plus the minified version) as part of an external application that is nested within Salesforce. That works well, except now I need to support the option for the Compact Density UI.

From what I can determine this compact UI is achieved via Design Tokens that are defined as variables for a CSS preprocessor such as Sass or Less.

How can I create a static CSS file that represents the compact display UI?

I can see the design system in GitHub along with some example commands to compile "Sass to CSS". Playing with the Compilation steps I got as far as npm run gulp -- styles. That generated an assets > styles directory with a range of css files, but none of them seemed applicable for a compact UI.

Is it just a matter of giving it the correct parameters to generate the output with the correct design tokens applied?

In examining the actual Salesforce UI it appears they apply the compact UI via CSS variables defined in the root and the var() function.

I've also asked this question in the Design Trailblazers group.

Improve this question

1 Answer 1

Reset to default
6

Is it just a matter of giving it the correct parameters to generate the output with the correct design tokens applied?

You're pretty close! In order to replicate the compact display using a static CSS file, do the following:

  1. Clone and use the SLDS repo
  2. Open up design-tokens/primitive/spacing.yml
  3. Update all the VAR_* tokens (e.g. VAR_SPACING_SMALL) to your desired compact values. These are the tokens targeted by the platform to control density; we're imitating the behavior here. The comfy and compact values are defined in Margin > Variable Density Classes

enter image description here

  1. Run npm run gulp -- generate:tokens:components:imports
  2. Run npm run gulp -- generate:tokens:package
  3. Run npm run gulp -- styles

This will generate your CSS file in assets/styles/index.css with your new, compact values.

We're currently working on a way to simplify this process but until then this will get you what you need.

Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .