muds-dictionary v1.1.0

MUDS (Muni Desing System) Style Dictionary

Overview

A Style Dictionary is a system that allows you to define styles once, in a way for any platform or language to consume. A single place to create and edit your styles, and a single command exports these rules to all the places you need them - iOS, Android, CSS, JS, HTML, sketch files, style documentation, etc.

Description

This repository contains support for compiling the style dictionary with the tokens that were defined by design area. Making use CLI of project "Style Dictionary" allows to generate new sources that can be used by different clients (SCSS, JSON, Android, etc).

How to use it?

Clone repository

git clone https://github.com/muni-app/design-system.git

Enter project folder

cd muds-dictionary

Install dependencies

npm install

Add new json files

Each new file you want to add; must have the Theme specification and add JSON file inside the "tokens" folder. Theme Specification

Commands

This project can execute de following commands:

• npm run build-dictionary

  • desc: Exports all rules define in <rootDir>/tokens.
  • input: config.js/config.json file.
  • output: Project bundle located in <rootDir>/build/[platformBuilds].

Extends configuration

To extend configuration you need to add your custom formats, transform or props in config.js file.

For example:

// Extends config.json
const StyleDictionary = require('style-dictionary').extend('./config.json');

StyleDictionary.registerFormat({
  //Do your stuff here...
})

//Build for all platforms at the end
StyleDictionary.buildAllPlatforms();

Check official documentation for more information Extends Configuration