@zedelivery/mozeic-style-dictionary NPM

Introduction

Mozéic Style Dictionary is Zé's (and also one of our favorite hops - Mosaic) style dictionary, developed by Lupulus (the design team), that help us to develop and support applications easier and faster. Our ecosystem is based on React and React Native, but this project can be used by any platform such as CSS, Sass, Javascript, Flutter, Android, iOS and so on.

Ok, Style Dict.. What??

Ops, I forgot to tell you about what a style dictionary is for.

Well, we are trying to create a Design System that everybody can contribute to by creating components that can be reused everywhere.

But how can we make sure that all those components are making our applications visualy consistent to our users?

By using design tokens within our Atomic Design mental model.

Ok, that's enough theory!! What does a style-dictionary has to do with it?.

Simple: the UX team create design tokens using their tools(Adobe XD), we import them into our style dictionary based on amazon style dictionary, so we can generate style variables for each platform(css, js, android...), and distribute them via npm, and that's how we allow scalability and consistency throughout our applications.

This project is meant to be used mostly by our pattern libs such as mozeic-app-design-system and mozeic-web-design-system, but this is a global project that could be used in anyone of our company apps, including all the B2B2C projects.

Why Mozéic?

Mosaic is a variety of aromatic hops that offers a unique and complex combination of tropical, floral and earthly fruit traits, which translate very favorably into various styles of beer. So we think that this is the kind of combination that we want to purpose with this project, aaand of course, you can see the 'zé' in it, which is a common approach that we have for naming things here 😅

Using Mozéic Style Dictionary

Instalation

Run the following command using npm:

npm install @zxventures/mozeic-style-dictionary

If you prefer Yarn, use the following command instead:

yarn add @zxventures/mozeic-style-dictionary

Usage

Import any styling variable directly from @zxventures/mozeic-style-dictionary dependency. Js variables are the default, but we can use variations platforms such as '@zedelivery/mozeic-style-dictionary/react-native', '.../css', '.../sass', default is '.../js'

import {
    ButtonFontSize,
    ButtonColorBackgroundPrimaryDefault,
} from '@zedelivery/mozeic-style-dictionary';

Add tokens in your style component.

import { StyleSheet } from 'react-native';
import {
  ButtonFontSize,
  ButtonColorBackgroundPrimaryDefault,
  ButtonColorTextPrimary
} from '@zedelivery/mozeic-style-dictionary/react-native';

export const styles = StyleSheet.create({
  container: {
    borderColor: ButtonColorBackgroundPrimaryDefault,
    backgroundColor: ButtonColorBackgroundPrimaryDefault,
  },
  buttonText: {
    color: ButtonColorTextPrimary,
    fontSize: ButtonFontSize,
  },
  buttonTextDisabled: {
    color: ButtonColorTextPrimary,
  },
});

How to contribute?

First of all, you should check out the handoff process that we follow in order to create a task for creating/improving components on our DS. Keep in mind that this process is always changing and being improved.

Installing

npm install should install all dependencies;

Building locally via cmd

npm run build2 should create all output variables for css, scss and js variables

Importing tokens from figma

We Use figma Design tokens plugin https://github.com/lukasoppermann/design-tokens#design-tokens

| Design tokens export settings | Pluggin settings |

Workflow

We are using the trunk base development workflow to develop features.

You should create feature branches and integrate them by issuing pull requests.

You should follow semantic release commit naming conventions.

Our CI/CD is based on travis:

ON OPEN PR -> We are using semantic release in order to bump up versions based on commit naming convetion.
ON MERGE PR -> We are using npm token from our ze-tooling@ze.delivery account in order to deploy the new release automatically.

P.S: As you can see on the handoff process docs, we should have as many developers and uxs as necessary to review those changes.

How to contribute

Clone this repository to contribute and don't forget to align any modification or new feature with the UX team before opening your pull request. It's important to respect the UX flow to not merge any incomplete code that might affect the projects that are already using Mozeic.

Be sure to have developers approvals, all checks passing and follow all pull request's template items before merge any pull request.