OneFish-foundation

OneFish is eFishery's Design System Language. This project is to define it's foundation or known as design token.

In eFishery, we have multiplatforms aplications, mostly built in React JS for webapp and android or react-native for mobile app. In other to maintain consistensy, so we have to define the foundation of our design system. Instead of maintaining two kind of styling language, such as css for web and xml for android, we create this project and write our design token within JSON file. Our goal is to write the design token once, and then transform it into any formats that supported by any platforms we use.

Here, we use style-dictionary, library that match our need.

Usage

It depends on your platform and how you style your app.

Web

Install to you project

npm install --save @onefish/foundation

or

yarn add @onefish/foundation

For example you want to build Primary Button react components, with btn-primary className.

//react component
const ButtonPrimary = () => {
  return <button className="btn-primary">{children}</button>;
};

CSS

Import variables.css file into your src/index.js. It will inject all the design token as css variables in the :root.

// src/index.js
import "@onfish/foundation/build/css/variables.css";

Use variables into your css files.

/* your css file */
.btn-primary {
  background-color: var(--color-brand-primary-observatory);
}

SCSS

Import _variables.scss file into your main global scss file.

/* your index.scss file */
@import "~@onfish/foundation/build/scss/variables";

Use variables into your scss files.

/* your button.scss file */
.btn-primary {
  background-color: $color-brand-primary-observatory;
}

JS

If you use any CSS-in-JS or UI libs or CSS utilities that need theme configuration within JS file, you can use the JSON format of the design token. Import within your JS module.

import variables from "@onfish/foundation/build/js/variables.json"

// or

const variables = require("@onfish/foundation/build/js/variables.json")

Then you can do any transformation or map the value into the format that match your UI library.

For example if using tailwindcss:

// tailwind.config.js
const variables = require("@onfish/foundation/build/js/variables.json");

module.exports = {
  theme: {
    extend: {
      ...variables.color,
      spacing: {
        ...variables.sizr,
      },
    },
  },
  plugins: [],
};

Android

For now, you have to download XML file under the build/android folder within this repo.