@mdillgen/sboiler-tokens NPM

An opinionated design token generator that serves as a boilerplate for creating and managing the foundations of design systems.
This project aims to generate design-related tokens with OKLCH colors, fluid spacing and typography, themes and modes – supporting state-of-the-art web technologies. It is intended to help teams establish consistent design principles across various applications.

Installation

To create a new project based on this repository, run the following command:

npx degit mdillgen/design-system-tokens my-design-system && cd my-design-system && pnpm install

Usage

Configuration

The project uses YAML configuration files located at src/tokens/config. These files define the settings and options for generating Core design tokens. Make sure to update this file according to your design requirements before running the token generation script.

Generating Core Tokens

Run the following command to generate “Core“ design tokens, (e.g., color palettes, typography and dimension primitives):

pnpm generate

This will execute the scripts located in src/scripts/generate. The generated tokens will be postprocessed by the scripts located in src/scripts/postgenerate. The output will be saved in the src/tokens/core directory.

!NOTE The semantic token sets include themes and modes. You may want to customize these token sets to match your needs before building the project.

Building the Project

To build the project, use the following command:

pnpm build

This will execute all scripts defined in src/scripts/index.ts.

!IMPORTANT The build step also includes generating the core design tokens beforehand.

Release

To release a new version, follow these steps:

Commit Changes: Ensure all your changes are committed and pushed to the repository.
Run Changesets: Use the following command to create a changeset:
```
pnpm changeset
```
Follow the prompts to describe your changes. This will create a new changeset file in the .changeset directory.
Version Packages: To version the packages based on the changesets, run:
```
pnpm changeset version
```
This will update the package versions and changelog files.
Push Changes: Commit and push the changeset and version updates:
```
git add .
git commit -m "chore: version packages"
git push
```
Create a Release: Finally, create a new release by running:
```
pnpm changeset publish
```
This will publish the new version to npm and create a GitHub release using the release.yml GitHub Actions workflow.