Widde Design Tokens Library

A design tokens library for Widde, using Style Dictionary to generate SCSS, JSON, and CSS variables. Enhance Widde UI development with consistent, easily integrated design principles.

Table of Contents

• Introduction
• Installation
• Usage
• Configuration
• Building Tokens
• Contributing

Introduction

The Widde Design Tokens Library provides a centralized system for managing and using design tokens across all Widde user interfaces. This library leverages Style Dictionary to generate SCSS, JSON, and CSS variables, ensuring design consistency and ease of integration.

Installation

To install the Widde Design Tokens Library, you need to have Node.js and npm installed. Note that @developer-widde/ds-tokens is a private package, so you need to authenticate by adding a token or logging into npm in your terminal. Then run the following command:

npm login
# or
npm set //registry.npmjs.org/:_authToken=YOUR_AUTH_TOKEN

npm install @developer-widde/ds-tokens

Using Yarn

yarn login
# or
yarn config set //registry.npmjs.org/:_authToken YOUR_AUTH_TOKEN

yarn add @developer-widde/ds-tokens

Usage

To use the design tokens in your project, import the generated variables into your SCSS, JSON, or CSS files. Here's an example of how to import SCSS variables:

@import "@developer-widde/ds-tokens/dist/scss/_tokens.scss";

For CSS:

@import "@developer-widde/ds-tokens/dist/scss/_tokens.css";

For JSON, you can require the JSON file in your JavaScript:

const tokens = require("@developer-widde/ds-tokens/dist/scss/_tokens.json");

Configuration

The configuration for the Widde Design Tokens Library is managed through a config.json file. This file defines the source of the tokens and the output formats. Here is an example configuration:

{
  "source": ["tokens/**/*.json"],
  "platforms": {
    "json": {
      "transformGroup": "css",
      "buildPath": "dist/json/",
      "files": [
        {
          "destination": "_tokens.json",
          "format": "json/flat"
        }
      ]
    },
    "css": {
      "transformGroup": "css",
      "prefix": "w",
      "buildPath": "dist/css/",
      "files": [
        {
          "destination": "_tokens.css",
          "format": "css/variables"
        }
      ]
    },
    "scss": {
      "transformGroup": "scss",
      "buildPath": "dist/scss/",
      "files": [
        {
          "destination": "_tokens.scss",
          "format": "scss/variables"
        }
      ]
    }
  }
}

Building Tokens

To build the tokens, run the following command:

npm run build

This will generate the SCSS, JSON, and CSS variable files based on the configuration.

Contributing

We welcome contributions to the Widde Design Tokens Library. Please follow these steps to contribute:

1. Fork the repository.
2. Create a new branch (git checkout -b feature/your-feature).
3. Commit your changes (git commit -am 'Add new feature').
4. Push to the branch (git push origin feature/your-feature).
5. Create a new Pull Request.