# Zea UI

[![NPM Package][npm]][npm-url]
[![Build Size][build-size]][build-size-url]
[![NPM Downloads][npm-downloads]][npmtrends-url]

# Introduction
Zea UI is a javascript package purely for UI, oriented to support ZeaEngine features. It adds speed to UI that depends on the Engine.   
</br>
</br>
</br>

# Documentation
Full documentation with concepts, tutorials, live examples, API documentation and more; can be found at the zea ux docs site:
[https://zea.live](https://zea.live)

These docs allow developers to get started with the Zea UX by downloading free and open-source demo content and using Zea's publicly distributed client-side libraries.
</br>
</br>
</br>

# Licensing
The Zea UI plug-in is under a [`MIT`](https://en.wikipedia.org/wiki/MIT_License) license.
</br>
</br>
</br>

# Add it to your project
The process to add Zea UI to your projects is easy. 

## *Using CDNs*
For static websites or quick implementation you can always use CDNs like JsDelivr or Unpkg:

### *JsDelivr*
```html
<script crossorigin type="module" src="https://cdn.jsdelivr.net/npm/@zeainc/zea-web-components/dist/zea-web-components/zea-web-components.esm.js"></script>
```

### *Use it*
```html
<zea-button variant="solid" disabled="false" color="#FF0000">Btn</zea-button>
```

## *As a Module*
But if you want to use it like a module, then install the package in your project using `npm` or `yarn`:

```bash
npm i @zeainc/zea-web-components
## Or
yarn add @zeainc/zea-web-components
```

### *Use it*
```javascript
import { defineCustomElements  } from '@zeainc/zea-web-components/customs-elements'

defineCustomElements();
// ...
```
</br>
</br>
</br>

# CSS Themes

### Dark
For the components to display correctly, you would need to add the following variables to your project. Of course, this opens the door for you to fully customize it to your needs.

```css
:root {
  --ion-color-primary: #f9ce03;
  --ion-color-primary-tint: #fbe167;
  --theme-font-family: 'Roboto', sans-serif;

  --color-primary-1: #f9ce03;
  --color-primary-2: #fbe167;
  --color-primary-3: #594f1f;
  --color-secondary-1: #965cb8;
  --color-secondary-2: #c09dd4;
  --color-secondary-3: #3b3340;
  --color-warning-1: #e52011;
  --color-warning-2: #ef7970;
  --color-warning-3: #572724;
  --color-success-1: #8bc34a;
  --color-success-2: #b9db92;
  --color-success-3: #424f32;
  --color-background-1: #222222;
  --color-background-2: #292929;
  --color-background-3: #2d2d2d;
  --color-background-4: #101010;
  --color-foreground-1: #e0e0e0;
  --color-foreground-2: #aaaaaa;
  --color-foreground-3: #8a8a8a;
  --color-grey-1: #333333;
  --color-grey-2: #393939;
  --color-grey-3: #4e4e4e;
  --color-button-text-1: #222222;
  --color-button-text-2: #ffffff;
  --color-disabled-1: #242424;
  --color-disabled-2: #4b4b4b;
  --color-shadow: #00000026;
}
```

### Light

```css
:root {
  --ion-color-primary: #f9ce03;
  --ion-color-primary-tint: #fbe167;
  --theme-font-family: 'Roboto', sans-serif;

  --color-primary-1: #f9ce03;
  --color-primary-2: #fbe167;
  --color-primary-3: #594f1f;
  --color-secondary-1: #8b52af;
  --color-secondary-2: #b892ce;
  --color-secondary-3: #f2ebf7;
  --color-warning-1: #e52011;
  --color-warning-2: #ef7970;
  --color-warning-3: #fad2cf;
  --color-success-1: #8bc34a;
  --color-success-2: #b9db92;
  --color-success-3: #e8f3db;
  --color-background-1: #ffffff;
  --color-background-2: #ffffff;
  --color-background-3: #f5f5f5;
  --color-background-4: #ffffff;
  --color-foreground-1: #333333;
  --color-foreground-2: #7a7a7a;
  --color-foreground-3: #989898;
  --color-grey-1: #f5f5f5;
  --color-grey-2: #eaeaea;
  --color-grey-3: #d6d6d6;
  --color-button-text-1: #ffffff;
  --color-button-text-2: #333333;
  --color-disabled-1: #b8b8b8;
  --color-disabled-2: #e8e8e8;
  --color-shadow: #00000026;
}
```

# Dependencies
This plug-in depends on [ZeaEngine](https://docs.zea.live/zea-engine). So, if you're using CDNs, make sure to import it before UX.
</br>

> For questions on licensing, please fill out the contact form on our website: [_zea.live_](https://www.zea.live/contact-us)

[npm]: https://badge.fury.io/js/%40zeainc%2Fzea-web-components.svg
[npm-url]: https://www.npmjs.com/package/@zeainc/zea-web-components
[build-size]: https://badgen.net/bundlephobia/minzip/@zeainc/zea-web-components
[build-size-url]: https://bundlephobia.com/result?p=@zeainc/zea-web-components
[npm-downloads]: https://img.shields.io/npm/dw/@zeainc/zea-web-components
[npmtrends-url]: https://www.npmtrends.com/@zeainc/zea-web-components