Radius Toolkit

Radius Toolkit is a library designed to facilitate the development of design systems. It provides tools for framing, validating, and automating tasks involved in managing design tokens and other aspects of product development at scale. Whether you are working on a design system or building tools related to design systems, Radius Toolkit can be used as both a library and a command-line tool to supercharge your efforts.

• Installation
• Usage
  • Library
  • CLI
• Validation Formats
  • Radius Simple
  • Radius Layer Subject Type
• Features
• Configuration and Customization
• Contributing
• License
• Contact and Support

You can install Radius Toolkit via npm, yarn, or pnpm.

npm install radius-toolkit

yarn add radius-toolkit

pnpm add radius-toolkit

For CLI usage without installation:

npx radius-toolkit <command> <options>

To use Radius Toolkit as a library, you can import and utilize its functions in your code:

import { createValidatorFunctions, generateFileService } from "radius-toolkit";

// Example usage
const validate = createValidatorFunctions("radiusSimpleFormat");
const validationResult = validate(tokenData);

const output = generateFileService("templateName", { tokens: tokenData });

For more details, refer to the API documentation.

Radius Toolkit CLI provides commands for generating and validating tokens.

npx radius-toolkit generate <tokens-file.json> <options>

Generates assets (CSS, Tailwind Configuration) from the tokens file.

for more details, refer to the CLI documentation for the command.

npx radius-toolkit validate <tokens-file.json> <options>

Validates the tokens in the specified tokens file.

for more details, refer to the CLI documentation for the command.

The radius-simple design token name validator ensures that design tokens follow a consistent and simple naming convention, especially useful in scenarios where all tokens belong to a single token collection. This format is ideal for cases without semantic aliases, although it can still be used in such cases with meaningful names to clearly distinguish between primitive and semantic tokens.

More details can be found here.

The radius-layer-subject-type design token name format ensures that design tokens follow a consistent naming convention as the complexity of the token layer increases. This format is ideal for scenarios where multiple modes and layers of aliases are needed, ensuring clarity and distinction among various types of tokens.

More details can be found here.

To use these formats:

• Library: Import directly as radiusSimpleFormat and radiusLayerSubjectTypeFormat to make use of their functions.
• CLI: Use the --format flag to specify the desired format for validation.

• generateFileService(templateName, options): Generate assets from a token file or string.
• createValidatorFunctions(format): Returns a function that can validate tokens based on the specified format.

• Generate Assets: Generate CSS and Tailwind configurations from a design tokens file.
• Validate Tokens: Validate design tokens using predefined formats.

Currently, the library and CLI do not support custom formats and templates. These features are planned for the next version.

We welcome contributions to Radius Toolkit. Please see the CONTRIBUTING.md file for more details.

This project is licensed under the MIT License.

Radius Toolkit is maintained by Rangle.io As part of the Radius Meta-Framework.

You can find the source code for this project under Radius Token Tango on GitHub.

For support, please contact us through our GitHub repository, indicating radius-toolkit as the project. You can also reach out to us at Rangle.io.