Design System Data

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

Installation

``bash
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.

$3

Generate icon data to console:
`bash
npm run generate:icons
`

Generate icon data to file:
`bash
npm run generate:icons:file
`

Generate icon data to a specific output directory:
`bash
npm run generate:icons:file -- --output ./dist
`

Zip icons for distribution:
`bash
npm run generate:icons:zip
`

$3

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:
`bash
npm run generate:styling-hooks
`

Generate both Lightning and Cosmos themes to files:
`bash
npm run generate:styling-hooks:file
`

Generate Lightning theme to file:
`bash
npm run generate:styling-hooks:lightning
`

Generate Cosmos theme to file:
`bash
npm run generate:styling-hooks:cosmos
`

Generate to a specific output directory:
`bash
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

$3

Generate token data to console:
`bash
npm run generate:tokens
`

Generate token data to file:
`bash
npm run generate:tokens:file
`

Generate token data to a specific output directory:
`bash
npm run generate:tokens:file -- --output ./dist
`

$3

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

- --output : 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