npm package: @reterial/theme
Description: This is themeing for reterial design.
Latest version: 0.0.1-beta-1

# @reterial/theme
This is themeing for reterial design.

## What is the story of reterial ?
Reterial is [*jaypy.code*](https://jaypy.ir) design! When i was a junior frontend developer, i used [Material Design](https://material.io) to design my websites. I've used this design for a lots of websites and applications such as [Meydoon](https://git.rayda.ir/meydon) or [Kateb](https://git.rayda.ir/jaypy/kateb-web) or [Raybuy](https://git.rayda.ir/jaypy/raybuy-home-page) and other things. When i used them, i have to customize and change some styles of the design and my coworkers and friends said you shit on it (Take it good, they were my firends :D). And now i have my design to show them it's funny.

## How to build ?
You can use *npm* or *yarn* to complie all scss file to css in dist folder with:
```
npm run build
```

## How to start developing ?
I've design some scripts to start developing by runing *serve* to run a http server on port *5000* and a script to watch 'src' folder to refresh all built css on port *3000* with 'socket.io'.

### Run the http server by:
```
npm run serve
```

### Watch on source file change by:
```
npm run build:watch
```

# How to use ?
There is two way to themeing. You can use pre built themes or make it from your palette.

## 1) Link reterial theme
You can import themes from pre built css with CDNs.

```
<link type="stylesheet" href="/reterial/theme/dist/theme name.min.css" />
```


## 2) Make yours
You can also make your custom palette and theme with ```@reterial/theme``` package.

### How to install ?
You can use with *npm* or *yarn* to install ```@reterial/theme``` package.

```
npm i @reterial/theme
```
or use yarn
```
yarn add @reterial/theme
```

### How to use ?
After installing the package, in your *scss* or *sass* file import core of Reterial theme and make your palette and set it with a name.

#### With @reterial/color
```
@import "~@reterial/theme/core.scss";

@include ReterialTheme("theme name", ReterialPalette());
```
#### Without *@reterial/color*
```
@import "~@reterial/theme/core.min.scss";

@include ReterialTheme("theme name", ());
```

#### Warning
If you use ``` ~@reterial/theme/core.scss ```, it gives you *ReterialPalette* function and you must install *@reterial/color* (You don't need beacuse i've added to dependencies) else you just have ReterialTheme mixin.

## Call it!
You should call it with a html tag on body element. You must add *reterial-theme* with your theme name as a tag on body element.

```
In: HTML
...
<body reterial-theme="theme name">
    ...
</body>
...
```

# Accessibility
You should know how to use defained mixins and functions in @reterial/theme.

## ReterialTheme
``` ReterialTheme ``` is a mixin and gets a *theme name* and *ReterialPalette* (or a map).


```
In: scss

$my-palette: (
    "primary": black
);

@inculde ReterialTheme("theme name", $my-palette);
```

## ReterialPalette
``` ReterialPalette ``` is a function to merge default palette with your custom palette. It use *@reterial/color* by default so you must installed *@reterial/color* if you use this function but you don't need to import it.

```
In: scss
$my-palette: ReterialPalette(
    (
        "primary": $reterial-blue-500,
        "body": $reterial-ash-200
    )
);
```

# CDNs

### jsdelivr
```
https://cdn.jsdelivr.net/npm/@reterial/theme@latest/dist/default.min.css
```

### unpkg
```
https://unpkg.com/@reterial/theme@latest/dist/default.min.css
```

### github
```
https://raw.githubusercontent.com/reterial/theme/main/dist/default.min.css
```