Pacem JS - Colors

## Semantic Colors

Colors that have significance:

```html
<!-- example -->
<div class="shape-circle fill-primary">primary</div>
```

## Semantic Gradients

From solid colors to discreet gradients:

```html
<!-- example -->
<div class="shape-circle fill-primary fill-gradient">primary</div>
```

## Semantic Containers

Adjusted tones can be exploited obtaining sematics blocks of info.

```html
<!-- example -->
<div class="shape-square fill-primary-container">primary</div>
```

## Semantic Gradient Containers

From solid colors to discreet gradients:

```html
<!-- example -->
<div class="shape-square fill-primary-container fill-gradient">primary</div>
```

## Palette

Standard colors adapted that fits the actual theme:

```html
<!-- example -->
<div class="shape-circle fill-green">green</div>
```

## Palette Gradients

From solid colors to discreet gradients:

```html
<!-- example -->
<div class="shape-circle fill-green fill-gradient">green</div>
```

## Paletted Containers

Adjusted tones can be exploited obtaining colored blocks of info.

```html
<!-- example -->
<div class="shape-square fill-green-container">green</div>
```

## Paletted Gradient Containers

Adjusted tones can be exploited obtaining colored blocks of info.

```html
<!-- example -->
<div class="shape-square fill-green-container fill-gradient">green</div>
```

## Text

Text can be colorized as it follows:

```html
<!-- example -->
<span class="text-primary">primary</span>
```

## Interactivity

Hover/focus intereactivity feedback can be requested to filled `DOMElement`s or colored text content by adding `.fill-interactive` and `.text-interactive` css classes respectively.

```html
<!-- examples -->
<span class="fill-primary fill-interactive">primary</span>
<span class="fill-primary-container fill-interactive">primary-container</span>
<span class="text-primary text-interactive">primary</span>
```

## Borders

Borders can be colorized as it follows:

```html
<!-- example -->
<div class="shape-square border-solid border-size--2 border-primary">primary</div>
```

## Halo Effect

Halo effect either inner or outer can be applied as it follows:

```html
<!-- halo effect (outer) -->
<div class="shape-circle halo-primary">out</div>

<!-- halo effect (inner) -->
<div class="shape-circle halo-primary halo-in">in</div>

<!-- halo effect (both inner and outer) -->
<div class="shape-circle halo-primary halo-in-out">in-out</div>

```

## Glassmorphism

Glass effects, per-color, can be applied as it follows:

```html
<!-- glassmorphism -->
<div class="shape-circle fill-primary fill-glass">primary</div>

```

## Dynamic Colors

Generate palette from a specific set of colors: