Design System Data

This package contains scripts to generate data and data assets for aspects of the Salesforce Lightning Design System (SLDS).

Installation

npm install @salesforce-ux/design-system-data

Usage

This package provides several npm scripts to generate design system data. All scripts support the --output argument to specify a custom output directory.

Icons

Generate icon data to console:

npm run generate:icons

Generate icon data to file:

npm run generate:icons:file

Generate icon data to a specific output directory:

npm run generate:icons:file -- --output ./dist

Zip icons for distribution:

npm run generate:icons:zip

Styling Hooks

The styling hooks generator creates comprehensive styling hooks by combining the original styling hooks approach with metadata supplementation. It preserves all existing properties (including comment) while supplementing them with the latest metadata values.

Available Scripts

Generate Lightning theme styling hooks to console:

npm run generate:styling-hooks

Generate both Lightning and Cosmos themes to files:

npm run generate:styling-hooks:file

Generate Lightning theme to file:

npm run generate:styling-hooks:lightning

Generate Cosmos theme to file:

npm run generate:styling-hooks:cosmos

Generate to a specific output directory:

npm run generate:styling-hooks:file -- --output ./dist

Output Files

When generating to files, the script creates:

• styling-hooks-lightning.json for Lightning theme
• styling-hooks-cosmos.json for Cosmos theme

Design Tokens

Generate token data to console:

npm run generate:tokens

Generate token data to file:

npm run generate:tokens:file

Generate token data to a specific output directory:

npm run generate:tokens:file -- --output ./dist

Output Options

All generation scripts support the --output argument to specify a custom output directory:

• --output <path>: Specify the output directory (defaults to current working directory)
• The output directory will be created automatically if it doesn't exist
• Examples:
  • --output ./dist - Output to a dist folder in the current directory
  • --output /absolute/path/to/output - Output to an absolute path

Data

The generated data can be imported and consumed in your design system components and applications.

Licenses

• Source code is licensed under BSD 3-Clause
• All icons and images are licensed under Creative Commons Attribution-NoDerivatives 4.0