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.