# Lore UI

Package used to perform Lore stylization.

See below how to search for colors:

# Installation

This is a [Node.js](https://nodejs.org/download/release/latest/) library available through the [npm](https://www.npmjs.com/) registry.
Before installing, download and install [Node.js](https://nodejs.org/download/release/latest/). Node.js 18.10.0 or higher is required.

If this is a brand new project, make sure you create a `package.json` first with the command [`npm init`](https://docs.npmjs.com/creating-a-package-json-file).

Installation is done using the command [`yarn add`](https://classic.yarnpkg.com/lang/en/docs/cli/add/) or [`npm install`](https://docs.npmjs.com/getting-started/installing-npm-packages-locally):

```bash
$ yarn add lore-ui
```

or

```bash
$ npm install lore-ui
```

# Usage

Below are some ways to obtain the colors contained in this library:

```js
import { colors } from 'lore-ui'

const { blue, green, lore, red } = colors
const blueColor = blue[900]
const greenColor = green[900]
const loreColor = lore[900]
const redColor = red[900]

console.log(blueColor) // #008AD8
console.log(greenColor) // #4CAF50
console.log(loreColor) // #0B4260
console.log(redColor) // #F44336
```

Below are some ways to obtain the icons contained in this library, it is worth remembering that, unlike colors, icons require “await”:

```js
import { icons } from 'lore-ui'

;(async () => {
    const { cow, houseOutlined } = icons
    const cowIcon = await cow.lore[900]
    const houseIcon = await houseOutlined.gray[900]

    console.log(cowIcon) // data:image/svg+xml;base64,...
    console.log(houseIcon) // data:image/svg+xml;base64,...
})()
```

## Replacing a parameter with a specific color

Here are some examples for when it is necessary to use a color replacing some parameter.

```js
import { colors } from 'lore-ui'

const { blue, red } = colors
let text = 'The hexadecimal color is {{COLOR}}'

text = text.replace('{{COLOR}}', blue[900])

console.log(text) // The hexadecimal color is #008AD8

let text = '<{{COLOR}}>Hello world!</{{COLOR}}>'

text = text.replaceAll('{{COLOR}}', red[500])

console.log(text) // <#F88E86>Hello world!</#F88E86>
```