npm package: @kiwibot/foundation
Description: Foundation definitions for Kiwibot
Latest version: 1.0.4

# Foundation

Foundation is the library where you will find definitions of colors, spaces, shadows, and animations of Kiwibot to work with your components regardless of whether it's React, Vue, Svelte, etc.

You will find a way to work directly with JS, CSS, SCSS, and even with TailwindCSS.

<br />

## Installation

NPM:

```bash
npm install @kiwibot/foundation
```

YARN:

```bash
yarn add @kiwibot/foundation
```

# JS

## Colors

| Color   | Type               | Value     |
| ------- | ------------------ | --------- |
| light   | main               | #2c7be5   |
| light   | text               | #12263f   |
| light   | button-text        | #FFFFFF   |
| light   | body               | #F8FBFD   |
| light   | border             | #edf2f9   |
| light   | card               | #FFFFFF   |
| light   | subtitle           | #95AAC9   |
| light   | pseudo-subtitle    | #95AAC9   |
| light   | divider            | #E3EBF6   |
| neutral | green              | #9ACD32   |
| neutral | transparent-green  | #9acd3220 |
| neutral | red                | #FF6347   |
| neutral | transparent-red    | #FF63471a |
| neutral | orange             | #FFC105   |
| neutral | transparent-orange | #FFC10520 |
| dark    | main               | #4070DE   |
| dark    | text               | #FFFFFF   |
| dark    | button-text        | #FFFFFF   |
| dark    | body               | #202327   |
| dark    | border             | #2D323A   |
| dark    | card               | #26292E   |
| dark    | subtitle           | #616C7B   |
| dark    | pseudo-subtitle    | #909EAF   |
| dark    | divider            | #373D46   |

### Usage

```js
import { tokens } from '@kiwibot/foundation';

console.log(tokens.color.light.main.value); // #2c7be5
```

<br />

## Radius

| Type  | Value |
| ----- | ----- |
| small | 8px   |
| large | 20px  |

### Usage

```js
import { tokens } from '@kiwibot/foundation';

console.log(tokens.radius.large.value); // 20px
```

<br />

## Animations

| Type    | Value                                              |
| ------- | -------------------------------------------------- |
| default | all 400ms cubic-bezier(0.420, 0.000, 0.580, 1.000) |

### Usage

```js
import { tokens } from '@kiwibot/foundation';

console.log(tokens.animations.default.value); // all 400ms cubic-bezier(0.420, 0.000, 0.580, 1.000)
```

<br />

## Shadows

| Type    | Value                               |
| ------- | ----------------------------------- |
| level-1 | 0px 4px 6px rgba(33, 37, 41, 0.2)   |
| level-2 | 0px 2px 10px rgba(33, 37, 41, 0.15) |

### Usage

```js
import { tokens } from '@kiwibot/foundation';

console.log(tokens.shadows['level-1'].value); // 0px 4px 6px rgba(33, 37, 41, 0.2)
```

<br />

## Spacings

| Type | Value |
| ---- | ----- |
| 4    | 4px   |
| 8    | 8px   |
| 16   | 16px  |
| 32   | 32px  |
| 40   | 40px  |
| 48   | 48px  |
| 56   | 56px  |
| 64   | 64px  |
| 80   | 80px  |
| 100  | 100px |

### Usage

```js
import { tokens } from '@kiwibot/foundation';

console.log(tokens.spacings[16].value); // 16px
```

<br />

# CSS & SCSS

To work with CSS or SCSS, you only need to import the files as follows:

JSX / TSX

```jsx
// SAMPLE: CSS
import '@kiwibot/foundation/lib/tokens/css/colors.css';

// SAMPLE: SCSS
import '@kiwibot/foundation/lib/tokens/scss/colors.scss';
```

# TailwindCSS

To work with TailwindCSS, you only need to add the following require in the tailwind.config.js file:

```js
// tailwind.config.js

module.exports = {
  // ...
  // Add this line
  presets: [require('@kiwibot/foundation/lib/tailwindPreset.config.js')],
  // ...
};
```