![Alt text](https://spaced-out.github.io/ui-design-system/images/usage.png)

# Genesis Design System

- [Intro](#intro)
- [Usage](#usage)
  - [Installation](#installation)
  - [Component Usage](#component-usage)
    - [Using Components](#using-components)
    - [Setting Up Component Aliases](#setting-up-component-aliases)
    - [Setting Up Fonts](#setting-up-fonts)
    - [Using Genesis Design Tokens](#using-genesis-design-tokens)
      - [CSS Tokens](#css-tokens)
      - [JS Tokens](#js-tokens)
    - [Setting Up Design Token Aliases](#setting-up-design-token-aliases)
- [Documentation](#documentation)
- [Contributions](#contributions)
- [Changelog](#changelog)
- [Contributors ✨](#contributors)

## Intro

Genesis design system consists of a set of tools and protocols that unify design and development across surfaces (platforms) to deliver consistent
user experiences. The system utilizes workflow automation to streamline the design and development process. It's comprised of a number of React
web components that each play a unique role within the product development cycle.

The integration of these components are intended to grow and scale overtime to increasingly decrease workflow friction and optimize the product
development lifecycle.

## Usage

Follow the below mentioned guide for installation and usage instructions

### Installation

To install `@spaced-out/ui-design-system` in your project, you will need to run the
following command using [yarn](https://yarnpkg.com/):

```bash
yarn add @spaced-out/ui-design-system
```

### Component Usage

Usage of the component (after the library installed as a dependency in project) will be:

#### Using Components

```js
import React from 'react';

// There are multiple ways of importing a component

import {Button} from '@spaced-out/ui-design-system/lib/components/Button';

/** We also export all components | hooks | styles | utils | types from a common
 * index file located at @spaced-out/ui-design-system/lib.
 *
 * For multiple imports this can be used
 */

import {
  Button,
  BodyMedium,
  TEXT_COLORS,
  Toast,
  Dropdown,
} from '@spaced-out/ui-design-system/lib';

const App = () => (
  <div className={css.container}>
    <Button>Hello world</Button>
    <BodyMedium color={TEXT_COLORS.neutral}>Some text</BodyMedium>
  </div>
);

export default App;
```

#### Setting Up Component Aliases

You can also set up aliases in your build tool to further simplify imports if you want.
eg. This webpack config set up an alias for `@spaced-out/ui-design-system/lib` to `ui-design-system`

```js
const {MODE, DEVELOPMENT, RESOLVE_MODULES_DIRS} = require('./constants');

exports.default = {
  mode: MODE,

  devtool: DEVELOPMENT ? 'eval-cheap-module-source-map' : 'source-map',

  resolve: {
    symlinks: false,
    modules: RESOLVE_MODULES_DIRS,
    alias: {
      common: 'src/styles/common.css',
      designSystem2021: 'src/styles/design-system-2021.css',
      sentry: '@sentry/browser',
      'react-router': '@spaced-out/react-router',
      sculpt: '@spaced-out/sculpt',
      'ui-design-system': '@spaced-out/ui-design-system/lib',
    },
  },
};
```

For more information about each component, check out
[Storybook](https://spaced-out.github.io/ui-design-system).

#### Setting Up Fonts

By default Genesis uses `'Centra No 2'` font. To add this font in your project you need to load this font. The recommended way to do it is by adding the following in your global css.

```css
@font-face {
  font-family: 'Centra No 2';
  src: url('https://s3.us-west-2.amazonaws.com/assets.sensehq.com/type/CentraNo2-Book.woff2')
      format('woff2'), url('https://s3.us-west-2.amazonaws.com/assets.sensehq.com/type/CentraNo2-Book.woff')
      format('woff');
  font-weight: 300 400;
  font-style: normal;
  font-display: auto;
}

@font-face {
  font-family: 'Centra No 2';
  src: url('https://s3.us-west-2.amazonaws.com/assets.sensehq.com/type/CentraNo2-BookItalic.woff2')
      format('woff2'), url('https://s3.us-west-2.amazonaws.com/assets.sensehq.com/type/CentraNo2-BookItalic.woff')
      format('woff');
  font-weight: 300 400;
  font-style: italic;
  font-display: auto;
}

@font-face {
  font-family: 'Centra No 2';
  src: url('https://s3.us-west-2.amazonaws.com/assets.sensehq.com/type/CentraNo2-Medium.woff2')
      format('woff2'), url('https://s3.us-west-2.amazonaws.com/assets.sensehq.com/type/CentraNo2-Medium.woff')
      format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: auto;
}
```

#### Using Genesis Design Tokens

Design tokens are exported as `.css` and `.js`. You can consume them easily by

##### CSS Tokens

CSS use:

```css
@value (size2) from '@spaced-out/ui-design-system/lib/styles/variables/_size.css';

/* We also export all style variable(design tokens) and common classes from a common index
file located at @spaced-out/ui-design-system/lib/styles/index.css */

/* For @value from Multiple css files use this */

@value (
  colorFillPrimary,
  colorTextSecondary,
  colorTextDisabled,
  spaceXXSmall,
  spaceNone,
  spaceSmall,
  spaceXSmall,
  size34,
  sizeFluid,
  size40
  ) from '@spaced-out/ui-design-system/lib/styles/index.css';

.example-container {
  height: size2;
  composes: motionEaseInEaseOut from '@spaced-out/ui-design-system/lib/styles/index.css';
}
```

##### JS Tokens

JS use:

```js
import {size2} from '@spaced-out/ui-design-system/lib/styles/variables/_size.js';

/* We also export all style variable(design tokens) from a common index
file located at @spaced-out/ui-design-system/lib */

/* For multiple design token impoets use this */

import {
  sizeFluid,
  size2,
  spaceNone,
  colorTextNeutral,
  borderRadiusSmall,
} from '@spaced-out/ui-design-system/lib';
```

#### Setting Up Design Token Aliases

You can also set up aliases in your build tool to further simplify imports if you want.
eg. This webpack config set up an alias for `@spaced-out/ui-design-system/lib/styles/index.css` to `uiDesignSystem`

```js
const {MODE, DEVELOPMENT, RESOLVE_MODULES_DIRS} = require('./constants');

exports.default = {
  mode: MODE,

  devtool: DEVELOPMENT ? 'eval-cheap-module-source-map' : 'source-map',

  resolve: {
    symlinks: false,
    modules: RESOLVE_MODULES_DIRS,
    alias: {
      common: 'src/styles/common.css',
      designSystem2021: 'src/styles/design-system-2021.css',
      uiDesignSystem: '@spaced-out/ui-design-system/lib/styles/index.css',
      sentry: '@sentry/browser',
      'react-router': '@spaced-out/react-router',
      sculpt: '@spaced-out/sculpt',
      'ui-design-system': '@spaced-out/ui-design-system/lib',
    },
  },
};
```

## Documentation

- [Storybook](https://spaced-out.github.io/ui-design-system)

## Contributions

Check out our [**Contribution Guide**](https://spaced-out.github.io/ui-design-system/?path=/docs/contribution--page) to setup and contribute to Genesis.

## Changelog

Check out our [**Changelog here**](https://spaced-out.github.io/ui-design-system/?path=/docs/changelog--page)

## Contributors

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<table>
  <tbody>
    <tr>
      <td align="center" valign="top" width="14.28%"><a href="https://github.com/superrover"><img src="https://avatars.githubusercontent.com/u/86281150?v=4?s=100" width="100px;" alt="Nishant Gaurav"/><br /><sub><b>Nishant Gaurav</b></sub></a><br /><a href="https://github.com/Spaced-Out/ui-design-system/commits?author=superrover" title="Code">💻</a> <a href="https://github.com/Spaced-Out/ui-design-system/commits?author=superrover" title="Documentation">📖</a></td>
      <td align="center" valign="top" width="14.28%"><a href="https://github.com/Anant-Raj"><img src="https://avatars.githubusercontent.com/u/8904071?v=4?s=100" width="100px;" alt="Anant Raj"/><br /><sub><b>Anant Raj</b></sub></a><br /><a href="https://github.com/Spaced-Out/ui-design-system/commits?author=Anant-Raj" title="Code">💻</a> <a href="https://github.com/Spaced-Out/ui-design-system/commits?author=Anant-Raj" title="Documentation">📖</a></td>
    </tr>
  </tbody>
</table>

<!-- markdownlint-restore -->
<!-- prettier-ignore-end -->

<!-- ALL-CONTRIBUTORS-LIST:END -->