open-index/open-npm huggingface dataset:
npm package: @onefish/foundation
Description: eFishery's OneFish Design System Language Foundation
Author: eFishery's engineer
Latest version: 0.1.1

![OneFish Banner](/thumbnail.jpg)

# 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](https://amzn.github.io/style-dictionary/#/), library that match our need.

## Usage

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

### Web

Install to you project

```bash
npm install --save @onefish/foundation
```

or

```bash
yarn add @onefish/foundation
```

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

```js
//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`.

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

Use variables into your css files.

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

#### `SCSS`

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

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

Use variables into your scss files.

```scss
/* 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.

```JS
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:

```js
// 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.